Design
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 | Description |
|---|---|---|
| padding | Responsive<Padding> | true | Spacing |
| margin | Responsive<Margin> | Spacing | "auto" (supports negative values) |
| gap | Responsive<Gap> | true | Spacing |