In Studio.Design, you can control the spacing around and within boxes using three methods: margin, padding, and gap. By choosing the right type of spacing, you can fine-tune the distance between boxes and the space inside them.
Note: The only unit available for spacing is px. Other units such as % or vw are not supported.
Setting spacing on a box
Setting spacing on the screen
You can set spacing by dragging the guides around a box directly on the screen.
Select the box you want to add spacing to.
Hover your cursor over the appropriate area depending on the type of spacing you want to set:
Margin: Outside the blue border surrounding the box (shown in orange)
Padding: Inside the blue border surrounding the box (shown in light green)
Gap: Between boxes (shown in pink)
When an arrow appears, drag it in any direction to adjust the spacing.
Setting spacing from the right panel
You can also specify spacing by entering values in the right panel.
Select the box you want to add spacing to.
Select the [Box] tab in the right panel.
If the panel is closed, open the right panel first.
Enter values in the spacing fields ([Margin], [Padding], [Gap]) under the [Layout] menu.
Setting spacing for multiple sides at once
You can use the icon next to the margin or padding input fields to toggle between different input modes. Click the icon to switch between the following options:
Enter a different value for each side: Individual fields for top, bottom, left, and right are displayed.
Enter the same value for top/bottom and left/right: Two fields are displayed — one for vertical and one for horizontal spacing.
Enter the same value for all four sides: A single field that applies to all sides is displayed.
Types of spacing in Studio.Design
1. Margin
Margin is the spacing on the outside of the selected box. It's useful for adjusting the distance between boxes or creating overlapping effects with negative margins.
2. Padding
Padding is the spacing on the inside of the selected box. Use it to adjust the distance between the box's border and its content, such as text or images.
3. Gap
Gap is the spacing between grouped boxes. Use it when you want to evenly space multiple child boxes at once.
Gap is set by selecting the parent box (the grouped box). It only adds spacing between adjacent boxes — no spacing is added where there's no neighboring box.
margin padding gap