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:
Select an element (e.g. textbox)
Click on the
+symbol for either margin or padding in the right-side Style PanelSelect 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 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:
Select your section
Navigate to the section spacing in the right-side Style Panel
Input your desired spacing e.g. 100px top, 100px bottom