Spacing (margin and padding)

Learn how to add space inside and outside of an element's boundary using padding and margin.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

In this lesson
  1. Adding spacing to one side, opposite sides, or all sides at once
  2. Changing spacing units
  3. Resetting spacing values
  4. Adding negative margins
  5. Adding auto margin
  6. Centering an element horizontally within its container
  7. Understanding that margins collapse between adjacent elements
  8. Adding padding

Spacing

Spacing is the breathing room outside or inside of an element’s boundary. You can add spacing to the top, bottom, left, and right of an element. You can apply the spacing values to one side, two complimentary sides, or to all four sides.

Spacing individual sides

To add margin or padding to one side of an element, select the element on the canvas and style the margin or padding on one side by clicking and dragging on the padding or margin control of that side.

Alternatively, you can click on the margin or padding control for the side you want to add the spacing to and type in a value and unit manually or choose one of the presets.

Spacing complementary sides

You can change the spacing on complementary sides by holding the Option (alt) key on your keyboard and dragging one of the margin/padding controls. This is useful when you want to add the same value to two opposite sides.

You can also click the margin or padding control for one side and choose one of the presets while pressing the Option (alt) key.

Spacing all sides at once

Hold down the Shift key and drag the padding/margin controls of one side to apply the same value to all the sides of that property. Another way to achieve this is to click the spacing control for one side and choose one of the presets while pressing the Shift key.

Spacing units

The default spacing unit is pixels (px). You can change the unit and use any of the units listed in the spacing units menu. To access the unit menu, click any spacing control and then select the unit to the right of the spacing input field.

Select the unit you want to use and set a value. Alternatively, you can manually enter the value and unit in the input field. If you want to apply the same unit on all sides, hold Shift and drag the control you want to change. 

Learn more about input values and units.

Resetting spacing values

You can clear the spacing value of any side by clicking the blue value on the control while holding OPTION | ALT.

Margins

Add margins to an element to distance it from other elements around it.

Negative Margin

You can also add a negative margin to an element to push it outside of its natural position on the page. Negative margins can be used to overlap an element with other surrounding elements.

Auto Margin

The auto unit for margins is a powerful layout technique for pushing flex items to specific sides. Learn more about the auto margin trick with flex.

Centering an element horizontally within its container

You can center an element horizontally using the center element button on the Style panel. 

Selecting the center element button will set the margin to auto on only the element’s sides, leaving the element’s display property unaltered.

Margins between adjacent elements

In some situations, the margins of adjacent elements combine to form a single margin. This is known as collapsing margins and can be confusing as it happens only in certain situations and can be overwritten in others. The margins of adjacent grid children do not collapse.

Learn more about collapsing margins.

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

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

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

Padding

Add padding within an element to distance its content inside of the element from its boundaries.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.