The Spacing block sets padding and margin (uniform or per-side) and, for flex/grid containers, Gap (one value or separate Row/Col).
Where: Right sidebar → Layout & Transform → Spacing — Select an element and open Spacing
Key ideas
- Padding & margin: Edit all sides together, or unlink for individual top/right/bottom/left.
- Gap: Only appears for flex/grid; spaces between children with no edge gaps. Unlink for separate Row/Col gaps.
Steps
- Open Layout & Transform → Spacing.
- Set Padding and Margin (unlink for per-side).
- For a flex/grid container, set Gap.
Padding, margin, and gap are different
- Padding adds space inside an element’s box; margin adds space outside it.
- Unlink the four-side control to tune top/right/bottom/left independently.
- Gap spaces children inside flex/grid layouts and creates no outer edge spacing; it is not available for every display mode.
Responsive and cascade checks
- Inspect the active breakpoint and class source before overriding spacing.
- For flex/grid, unlink Gap to set separate row and column values.
- Preview neighboring breakpoints because a fixed gap or side margin may cause overflow on a narrow layout.
Tips
- Use parent gap for consistent spacing between a group of children and padding for a container’s inner edge.