Spacing
Padding, margin, and gap utilities for controlling space inside and between elements. Use the spacing scale (3xs → 4xl) with directional variants. Prefer gap for flex containers, padding for inner space, and margin sparingly for outer space.
The Spacing Scale
All spacing utilities use the same scale: 3xs → 2xs → xs → s → m → l → xl → 2xl → 3xl → 4xl. Think of m as your baseline (typically 1rem), then step up or down as needed.
3xs2xsxssmlxl2xl3xlWhich Spacing Utility?
A quick guide to choosing the right tool for the job.
- You're spacing children in a flex container (.stack or .stack-horizontal)
- You want consistent spacing between multiple items
- You want spacing that adapts when items wrap
- This should be your first choice 90% of the time
- You need inner space inside an element (cards, buttons, containers)
- You're creating breathing room around content
- You need different spacing on different sides of a container
- You can't use gap (not in a flex container)
- You need to push a single element away from others
- You need auto-centering (.mx-auto, .ml-auto, etc.)
- You need negative spacing to overlap or pull elements
- Gap doesn't collapse or interact with neighboring margins
- Gap only affects the space between items, not before the first or after the last
- Gap is easier to reason about and maintain
Gap — Space Between Items
Use gap-* on flex containers (.stack or .stack-horizontal) to space children. This is the cleanest way to add space — no margin math needed.
.gap-xs — tight spacing for related items.gap-m — default spacing, good for most cases.gap-l — comfortable spacing with breathing room.gap-row-* — control only vertical spacing.gap-column-* — control only horizontal spacingNegative Margin — Overlap & Pull
Use m--* to pull elements closer or create overlapping layouts. Useful for offsetting elements, breaking out of containers, or creating visual hierarchy.
.mx--m — break out of parent's horizontal padding