In Studio, you can adjust the spacing and positioning of boxes in your design using margins, padding, and gaps.

Margins and padding add space to the selected box itself. Gaps are the spaces between boxes that you can adjust by selecting their parent box.

To adjust the size of the margins, padding, or gaps, you can drag the colored bars in the Editor or enter a value directly from the style menu at the top of the screen.

For margins and padding, you can adjust the size for each side individually, or click the padlock icon in the middle to set the same value for all sides. For gaps, you can set equal values for both horizontal and vertical spaces.

Margins are the spaces outside the box.

When you select a box and hover the cursor just outside the blue selection outline, you will see an orange arrow. Drag the arrow up, down, left, or right to add margins.

You can also set negative margin values, also known as "negative margins," which can be useful in layout designs.

Negative margin

Padding is the space inside the box.

Click on a box and hover the cursor just inside the blue selection outline. A green arrow will appear, which you can drag up, down, left, or right to adjust the padding.

Gaps are the spaces between boxes, and you can use them to set equal spaces between multiple boxes at once.

To use gaps, you need to first group the boxes you want to adjust.

Select the parent box that you have grouped and you will see a pink line between the child boxes. Hover your cursor over it and drag the arrow that appears up, down, left, or right to adjust the gaps.

Note that gaps add extra space between boxes, so none will be added where there are no adjacent boxes.