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

Back to Top