Design systemSpacing
The spacing scale and the margin, padding and gap utilities built on it.
Steps
17 rows
| Name | Preview | Value |
|---|---|---|
| 0 | 2px0.125rem | |
| 1 | 4px0.25rem | |
| 2 | 8px0.5rem | |
| 3 | 12px0.75rem | |
| 4 | 16px1rem | |
| 5 | 20px1.25rem | |
| 6 | 24px1.5rem | |
| 7 | 28px1.75rem | |
| 8 | 32px2rem | |
| 9 | 36px2.25rem | |
| 10 | 40px2.5rem | |
| 11 | 44px2.75rem | |
| 12 | 48px3rem | |
| 13 | 52px3.25rem | |
| 14 | 56px3.5rem | |
| 15 | 60px3.75rem | |
| 16 | 64px4rem |
Spacing utilities
289 rows
| Class | Token | Property | Resolves to |
|---|---|---|---|
| m · 17 | |||
| 0 | margin | 0.125rem | |
| 1 | margin | 0.25rem | |
| 2 | margin | 0.5rem | |
| 3 | margin | 0.75rem | |
| 4 | margin | 1rem | |
| 5 | margin | 1.25rem | |
| 6 | margin | 1.5rem | |
| 7 | margin | 1.75rem | |
| 8 | margin | 2rem | |
| 9 | margin | 2.25rem | |
| 10 | margin | 2.5rem | |
| 11 | margin | 2.75rem | |
| 12 | margin | 3rem | |
| 13 | margin | 3.25rem | |
| 14 | margin | 3.5rem | |
| 15 | margin | 3.75rem | |
| 16 | margin | 4rem | |
| mx · 17 | |||
| 0 | margin-inline | 0.125rem | |
| 1 | margin-inline | 0.25rem | |
| 2 | margin-inline | 0.5rem | |
| 3 | margin-inline | 0.75rem | |
| 4 | margin-inline | 1rem | |
| 5 | margin-inline | 1.25rem | |
| 6 | margin-inline | 1.5rem | |
| 7 | margin-inline | 1.75rem | |
| 8 | margin-inline | 2rem | |