Padding & Margin

Padding and margin can add space or breathing room inside or outside of an element's boundary. Padding creates space on the inside of an element, while margin creates space on the outside of an element. These properties make it possible to create responsive websites whose content reflows while creating consistent spacing.

In this lesson

Spacing individual sides
Spacing complementary sides
Spacing all sides at once
Negative margin
Auto margin
Collapsing Margins

Spacing Individual Sides

Select an element and style the margin or padding on one side of the element by clicking and dragging on the padding or margin control.

You can also click into a padding or margin value and type in a value and unit manually.

Spacing Complementary Sides

You can easily change spacing for complementary sides, like both top and bottom or left and right. Hold option (or alt on Windows) while dragging one of the margin/padding handles will affect the opposite sides. For example: holding option/alt while dragging the Top Margin handle will add the same value for the Bottom Margin.

Spacing All Sides at once

Holding down shift and grabbing the padding (or margin) of one side will apply the same value to the other three sides of that property.

Negative Margin

We can add a negative margin to an element to cause it to move outside of its normal place on the page. Negative margins can be used to overlap the element with other surrounding elements.

Auto Margin

Setting a margin of “auto” on certain elements will make that margin side behave like a spring that pushes the element.

Here’s an example using auto on the left and right margins to center a block element.

Select an element
Set the Display Setting to Block
Set a width, like 50% or 200px
Click on the the left and right margin values and type in auto

You can also click on the Center Element button on the right of the margin and padding controls to set these automatically.

Pro tip

The auto unit for margins is a powerful layout technique for pushing flex items to specific sides. Learn more.

Good to know

Using percentage values for paddings or margins may behavior differently in different browsers.

Collapsing Margins

In some situations, margins of adjacent elements combine to form a single margin. This can be confusing as it happens only in certain situations and can be overwritten in others. Learn more about collapsing margins.

Good to know

The margins of adjacent grid children do not collapse.

Known issue: Content at the bottom of the page is not visible in the Designer

One known issue with collapsing margins is where the content in the footer of a page is cut off. And, you are not able to access it or scroll to it even in the Designer. That's because the content is being pushed out of the body element at the bottom of the page. This issue usually occurs when using an absolutely positioned navbar.

To avoid this issue, don’t add a top margin on the first element on your page when that element doesn't have a fixed position. Instead, add a top padding to the body element.