undefined - Margins, Padding and Borders for content blocks - illustration 06a6cdda-2e0c-4345-a3de-6be30f5393ad

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


All rows and columns and content blocks (text, images, video, etc.) allow 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 will set up 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 comprises 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. The border may not be visible in some cases but will still be affected by padding and margins.

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration 0d8172c2-60a2-4e57-bf8a-32ffab1f265f

A good example of the difference between padding and margins can be seen when applied to a row's background image. 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 row's padding 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.

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration e487e90e-92cc-4639-8061-82d5158990aa

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 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.

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration 76038ce9-7ccc-4c07-b444-6681adda234f

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

To explain how padding and margin are 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 toolbar appear as well as the toolbar for your content block. 

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

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration 795ef4d6-2ce3-4435-80bc-74714e583627

Click on the Design Options tab.

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration 3a052645-5e8a-4b94-91b5-9b1111f538d7

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

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration 8d6e44b0-f91a-44b4-b5ad-348d3c26802f

Adding Borders

If you would like to add a border to an element such as Row, Column or Content Block such as text, images, video, etc., the process is similar to the 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.

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration cb27f978-9185-403c-bec2-200b90f59f6e

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

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration 2892d5d8-6517-4264-9e7f-ca6f73c4b734

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).

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration af86b727-8154-4aae-9118-1f9efc3f6f17

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

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration 9c383b82-56b4-4e8b-8dc8-b1de503d73d8

Finally, select the Border Style. Click on Save

QuoteCloud - Sales Quote, Sales Proposal and Contracts Software - Margins, Padding and Borders for content blocks - illustration dfd131ed-6687-4bd0-a0eb-2a0d64fb5b4f

Related User Guide Topics