Margin & padding are settings used to create space between and inside elements.
Margin is the space outside of a box. On STUDIO it is orange.
Padding is the space inside a box. On STUDIO it is green.
Setting Margin & Padding on individual sides
You can set margin & padding by:
- Dragging the orange or green label at the centre of each border of an element.
- Selecting an element and setting a precise value from the top bar.
You can set margin and padding not only on individual sides, but also on complementary sides or on all sides at once.
Setting complementary sides margin & padding
To quickly set the same margin or padding on both right & left side, click on the lock at the center of the settings once.
Setting margin & padding on all sides at once
To quickly set the same margin or padding on all sides, click on the lock twice before setting margin or padding value.
Negative margin can be used to eliminate space in between elements, in order to create overlay effects.
It can be set by adding a - (minus) symbol before the value from the settings on the top bar.
Relationship between margin & width
Margin can affect the width an item.
When the with is set to pixels (px), adding a margin doesn’t affect the width of an element.
On the other hand, when width is set to % the elements size is affected.
More about width & heigh unit of size here.