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
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
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
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