Margin and Padding

If you were to draw a line around your content area, margins are the space outside and padding is the space inside the box.  

By default we do not use margin on our areas, but at the box level margin can be a helpful design choice to offset content from the rest of the page and make it stand out. 

Padding can help to draw attention to content by adding extra space around it making the content easier to read.  It can be adjusted while making sure that background colors or images are kept at the full height and width.

Margin

Open Left / Right

• open-left
• open-right

Use these options to create empty space within a section on either the right or left.  This can be useful when the background is an image where you want to show content and not cover it up with text.

These options are only available in desktop and large format.  Mobile and small format spaces will remove the space so content can be seen in the largest space available.

Padding

Padding is the space inside of an element. For example if you have a border around an element, padding will be the space inside the element between the border and the contents. 

NOTE: the image in our example has additional styles added using the editor styles drop down menu

• remove padding
• remove margin top

This allows us to make the image go 100% inside the space when using padding-zero on the main CSS style for the section.