On-canvas spacing (padding, margin, gap)

Spacing is editable right on the canvas: drag the bars on an element’s edges to set padding, hold M to switch them to margin, and drag the bars between flex/grid children to set the gaps.

Where: Canvas → select an element (or a flex/grid container) — Drag the spacing bars

Key ideas

• Padding: Grab bars just inside each edge drag that side’s padding; Alt drags the opposite side too.
• Margin (hold M): Hold M to flip the same handles to margin (they recolor and move outside the edge).
• Gap: For a flex/grid parent, bars between children drag the column-gap and row-gap.

Steps

1. Select an element; drag the edge bars to set padding.
2. Hold M and drag to set margin instead.
3. Select a flex/grid container and drag the bars between children to set the gap.
4. Hold Alt to change opposite sides together.