Spacing options

Adding spacing

Distribute horizontal and vertical elements

Section spacing

🪐 Spacing options

Spacing for elements can be set by two options: margin and padding. Here is a quick breakdown of those options:




Used to define space around (or outside) the element


Use to define the space between a container and its contents (or inside) the element

➕ Adding spacing

To add spacing:

  • Select an element (e.g. textbox)

  • Click on the + symbol for either margin or padding in the right-side Style Panel

  • Select where to apply the spacing (to the element e.g H1 or container)

  • Select a value (pixels, percentage, or viewport height/width)

  • Input spacing until you have the desired outcome

Tip: You can also add negative values to the spacing input e.g. -100px.

🚀 Distribute horizontal and vertical elements

If you have multiple elements or frames that need the same spacing in between, you can use the distribute horizontal and vertical tools to quickly organize them into a consistent layout.

To do this:

  • Select your multiple elements

  • Navigate to the distribute tool in the right-side Style Panel

  • Select distribute horizontal or vertical depending on your needs

🛸 Section spacing

For sections, you are able to apply padding to the top or bottom, which is extremely useful when you want to keep the spacing between sections consistent.

It is also helpful when collaborating with writers in the Content Editor as the section will grow but keep that desired spacing without having the designer go back to readjust.

To add spacing to a section:

  • Select your section

  • Navigate to the section spacing in the right-side Style Panel

  • Input your desired spacing e.g. 100px top, 100px bottom

Related Articles

Auto Layout

Sizing Components

Project Breakpoints

Using Constraints

Understanding the Safe Zone

Did this answer your question?