close

Margins, Padding and Borders for Rows, Columns and Content Blocks


All rows and columns and content blocks (text, images, video, etc) provide the ability for you to adjust the margins and padding, or apply a border.  

 

Margin: this is the amount of space outside the Row, Column or Content block

Padding: this is the amount of space inside the Row, Column or Content block

 

If you are going to setup complex content layouts, it is important to understand how margin and padding work, and why you would use them.

Padding and margins are very similar, and it can be difficult to know which one you should use. The basic purpose of both is to change the amount of space between elements on the page, and change their positions by creating or minimising whitespace.

To understand the difference between padding and margins, you should first know how elements are displayed on the page. An element (text, images, video ,etc) on the page, is made up of: the content itself, space around the content, a border around the content, and space between the border and the border of the next element. Padding affects the space between the content and the border. Margins affect the space between the border and the next element. In some cases the border may not be visible, but will still be affected by padding and margins.

A good example of the difference between padding and margins can be seen when applied to a background image of a row. A row is a single element on a sales quote page. Applying a background colour to a row will make the borders of the row obvious.

The padding of the row affects the space between where the content within the row ends and the background colour of the row ends. Add padding to a row background will increase the amount of coloured space outside of the content.

With no padding applied, there is no coloured space around the content.

In comparison, the margins are the space beyond the coloured background, between the row and the next row. Adding margins to a row background will increase the amount of white space between the row and the row next to it, i.e. it will push the row down or up, left or right, away from the other row.

Paddings and margins can be added on any side around the content. In order to add padding or margins to content, row, or column.

To explain how padding and margin is applied to a row, create a content block (for example text , image, or video) this will automatically create a row containing one column.  In our example below we have used a text block. Hover on your content block and you will see the Row and Column tool bar appear as well as the tool bar for your content block. 

Click on the cogs icon of the Row (we will use a Row to demonstrate the margin and padding feature)

Click on the Design Options tab.

Type a value in the area you would like to add margin, padding (in pxels or a percentage).  In the example below we have added padding to the left and right of the content.

Adding Borders

If you would like to add a border to an element such as Row, Column or Content Block such as text, images, vidoe, etc; the process is similar to above.

We will use an image as an example in this tutorial. 

Click on the Insert... in the sales quote editor.

Click on the Add Image option to add an image to your sales quote.

Click on the cogs icon on the green tab bar to open the settings for the image block

Set the border width for each side of the content block (top, bottom left and right sides), as shown below we have set all sides as 1 (pixel).

Next set the colour of the border, click on the Border Colour selector.

Finally, select the Border Style. Click on Save

Related User Guide Topics

Moving Content Blocks (Drag & Drop)
10 Mar 2021
As you insert content blocks, i.e. text, images, videos, forms, spreadsheets, embedded PDF's, you may want to rearrange the position of these content blocks
Hide Content on a Sales Quote
11 Aug 2020
You may on occassion wish to create content in the Sales Quote Editor that does not appear when your customer views the sales quote.  For example, you may create a spreadsheet to perform calculations that should not show in the document that your customer reads; or you might create a block of text that is for your internal use, perhaps notes, instuctions or assumptions for your own use.  In this user guide topic, you can learn how to hide content in a sales quote.
Margins, Padding and Borders for content blocks
14 Mar 2020
If you are going to setup complex content layouts, it is important to understand how margin and padding work, and why you would use them.Padding and margins are very similar, and it can be difficult to know which one you should use. The basic purpose of both is to change the amount of space between elements on the page, and change their positions by creating or minimising whitespace.
Add background images to Rows and Columns
5 Mar 2020
A feature of rows and columns in the Sales Quote Editor is the ability to set a background image behind content contained in a row or column.  This user guide topic covers how to add a background image in a row and column.

Getting Started

QuoteCloud 2013-2021 Copyright all rights reserved