Gap and padding are the two spacing controls you'll use most when customizing stacks and sections. They control how much breathing room elements have — and getting them right is what makes a design feel polished.

Gap vs. Padding — What's the Difference?

Gap

Gap is the space between the children of a stack. If your stack has three buttons, gap is the space between each button. Increasing gap pushes items further apart from each other.

Padding

Padding is the space inside a container, between its edges and its children. Think of it like the margin inside a box. It controls how much space surrounds the content within a frame or stack.

How to Adjust Gap

1. Select a Stack on the canvas.

2. In the right panel, look for the Gap field — it's a number input in the Stack section.

3. Type a new value (e.g., 24 for 24px gap) or click-drag on the number to scrub it up/down.

How to Adjust Padding

1. Select any Frame or Stack.

2. In the right panel, find the Padding section.

3. You can set uniform padding (all sides equal) or click the link icon to set each side independently: top, right, bottom, left.

💡 Tip: Your template uses consistent spacing values throughout (like 16, 24, 32, 48px). Try to stick to these values when adjusting to keep the design looking cohesive and intentional.