Padding, margins and block/column sizes

Padding and margins tend to confuse a lot of people because they seem to refer to the same thing. They both have to do with setting the ‘white space’ around and between elements. Here's the difference.

Padding

Padding is the white space between the outer border of a block or column and the content within it. By adding more padding, content will shift to the middle of the block or column. You can adjust the padding for all four sides of your block or column separately.


Tip: In addition to the padding around your content, you can also set the positioning of content within each column. You set the position (top, middle or bottom) at Column > Settings > Alignment.

Margin

Margin is the space between the outer border of an element and the outer border of the adjacent element in the block or column.


By setting the margin, you can adjust the distance between two elements inside of a block or column. An example of margins would be the space between the title and the subtitle elements. 

Block/Column size

Blocks have a default height, and Columns have a default width when you create them, but you can easily change the height of a block or width of a column. At the bottom of a block you will see a white square handle with a thin purple border. Drag the handle up or down to change the height of the block. At the sides of your columns, you'll see a handle with a thin orange border. Drag the handle side to side to change the width of a column.