Applicable Plans: All Plans
How to Adjust Spacing
In Studio, you can use the following features to set spacing between boxes. This allows you to fine-tune the layout of your design. Note that spacing can only be set using pixels (px).
Margins
Padding
Gaps
Three Ways to Add Spacing
1. Margins
Margins add space outside a selected box. You can also use negative values—commonly known as negative margins—to adjust the layout creatively.
How to Set Margins
Select the box you want to edit.
Hover your cursor just outside the blue selection frame until orange arrows appear. Drag the arrows up, down, left, or right to adjust the margin.
Alternatively, you can enter precise values in the Style Menu at the top of the screen.
2. Padding
Padding adds space inside a selected box, creating distance between the content and the box's edges.
How to Set Padding
Select the box you want to edit.
Hover your cursor near the inside edge of the blue selection frame until green arrows appear. Drag the arrows up, down, left, or right to adjust the padding.
Alternatively, you can enter precise values in the Style Menu at the top of the screen.
3. Gaps
Gaps set equal spacing between grouped boxes. They allow you to easily adjust the spacing for multiple boxes at once.
Gaps only add spacing between adjacent boxes. If there’s no neighboring box, no gap will be applied.
How to Set Gaps
Select the parent box of the grouped elements.
Look for a pink line between the child boxes. Hover over the line until arrows appear, then drag them up, down, left, or right to adjust the gap.
Alternatively, you can enter precise values in the Style Menu at the top of the screen.
Tip: Use the "lock" icon to set spacing uniformly!
Click the lock icon in the Style Menu to apply the same value to all sides (for margins or padding) or to both horizontal and vertical gaps.
