Spacing
Spacing defines values that are used in margin, padding and gap properties. The spacing scale uses Tailwind’s native values.
Box with padding=“4”
Box with margin=“4”
Spacing values
| Value | Size |
|---|---|
| 0 | 0px |
| px | 1px |
| 0.5 | 2px |
| 1 | 4px |
| 1.5 | 6px |
| 2 | 8px |
| 2.5 | 10px |
| 3 | 12px |
| 3.5 | 14px |
| 4 | 16px |
| 5 | 20px |
| 6 | 24px |
| 7 | 28px |
| 8 | 32px |
| 9 | 36px |
| 10 | 40px |
| 11 | 44px |
| 12 | 48px |
| 14 | 56px |
| 16 | 64px |
| 20 | 80px |
| 24 | 96px |
| 28 | 112px |
| 32 | 128px |
| 36 | 144px |
| 40 | 160px |
| 44 | 176px |
| 48 | 192px |
| 52 | 208px |
| 56 | 224px |
| 60 | 240px |
| 64 | 256px |
| 72 | 288px |
| 80 | 320px |
| 96 | 384px |
Usage in layout components
Spacing values are used throughout the layout system. Box and all components that extend it (Row, Column, Grid, Flexbox) accept spacing props for controlling internal and external space.
- padding - Controls internal space within an element. Use directional variants (
paddingX,paddingY,paddingTop, etc.) for more control. - margin - Controls external space around an element. Supports negative values for overlapping layouts.
- gap - Controls space between child elements in flex and grid containers.
All spacing props accept responsive values for adapting layouts across breakpoints.
Component props
| Name | Type | Values |
|---|---|---|
| padding | Responsive<Padding> | true | Spacing |
| margin | Responsive<Spacing> | Spacing (supports negative values) |
| gap | Responsive<Gap> | true | Spacing |