--- title: Spacing description: Padding, margin, and gap utilities for setting space inside and between elements. Prefer gap for flex containers, padding for inner space, and margin for outer space. --- ## The spacing scale All spacing utilities share one scale: `3xs` → `2xs` → `xs` → `s` → `m` → `l` → `xl` → `2xl` → `3xl` → `4xl`. Treat `m` as the baseline (usually `1rem`), then step up or down. ```html
Token Size Use for
4xs
Tightest — inline text spacing, tight components
3xs
Tightest — inline text spacing, tight components
2xs
Very tight — compact lists, dense layouts
xs
Tight — form field groups, related items
s
Compact — card content, button groups
m
Default — general purpose spacing
l
Comfortable — section padding, breathing room
xl
Spacious — major sections, emphasis
2xl
Very spacious — page sections, hero spacing
3xl
Generous — page-level spacing
``` **Use gap when…** - Spacing children in a flex container (`.stack-v` or `.stack-h`) - Consistent spacing between many items - Spacing that adapts when items wrap - The default **Use padding when…** - Inner space inside an element (cards, buttons, containers) - Breathing room around content - Different spacing per side **Use margin when…** - No flex container for a gap - Pushing one element away from others - Auto-centering (`.mx-auto`, `.ml-auto`, etc.) - Negative spacing to overlap or pull elements **Prefer gap over margin because…** - Gap doesn't collapse or interact with neighboring margins - Gap only adds space between items, not at the edges - Gap is easier to reason abouttain ## Gap Use `gap-*` on flex containers (`.stack-v` or `.stack-h`) to space children. No margin math. ```html
Item 1
Item 2
Item 3
``` ```html
Item 1
Item 2
Item 3
``` ```html
Item 1
Item 2
Item 3
``` Set vertical spacing with `gap-row-*`, horizontal with `gap-column-*`. ```html
A
B
C
D
E
F
``` ```html
A
B
C
D
E
F
``` ## Negative margin Use `-m-*` to pull elements closer or overlap them — for offsetting elements, breaking out of containers, or visual hierarchy. ```html
Normal content
Full-width section with .-mx-m
Normal content
```