Skip to main content
How to add spacing

Create responsive content with padding and margins

Nina avatar
Written by Nina
Updated over a week ago

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

Spacing

Description

Margin

Used to define space around (or outside) the element

Padding

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

Adding spacing

To add spacing:

  1. Select an element (e.g. textbox)

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

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

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

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

  1. Select your multiple elements

  2. Navigate to the distribute tool in the right-side Style Panel

  3. Select distribute horizontally or vertically 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:

  1. Select your section

  2. Navigate to the section spacing in the right-side Style Panel

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

Did this answer your question?