Loading lessons...
Spacing & Size Cheatsheet
Spacing & Sizing Cheatsheet
The dynamic spacing scale in v4 means every integer works for margin, padding, width, height, gap, and more.
Quick spacing reference
| n | rem | px |
|---|---|---|
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
| 6 | 1.5rem | 24px |
| 8 | 2rem | 32px |
| 12 | 3rem | 48px |
| 16 | 4rem | 64px |
Margin & padding patterns
| Goal | Classes |
|---|---|
| All sides 1rem | p-4 |
| Horizontal 1.5rem | px-6 |
| Vertical 0.5rem | py-2 |
| Only bottom | mb-8 |
| Negative overlap | -mt-6 |
| Center block | mx-auto |
Sizing patterns
| Goal | Classes |
|---|---|
| Half width | w-1/2 |
| Full width | w-full |
| Full height | h-full |
| Full viewport height | min-h-screen (mobile-safe: min-h-dvh) |
| Fixed 3rem | size-12 |
| Container | max-w-2xl mx-auto px-4 |
Gap
gap-4(both axes),gap-x-2,gap-y-6.
Space between siblings
The space-* utilities add margins to all but the first child:
<div class="space-y-4">
<div>Item</div>
<div>Item</div>
</div>space-y-4 adds margin-block-start to all but the first element.
TL;DR
- Every integer works on the spacing scale.
mx-autocenters;max-w-*constrains.size-*sets both dimensions.space-y-*spaces stacked siblings.