Spacing and Sizing
Apply consistent sizes across your application.
Reference
| Token | Pixels | REM | Representation |
|---|---|---|---|
| 1x | 4px | 0.25rem | |
| 2x | 8px | 0.5rem | |
| 3x | 12px | 0.75rem | |
| 4x | 16px | 1rem | |
| 5x | 20px | 1.25rem | |
| 6x | 24px | 1.5rem | |
| 7x | 28px | 1.75rem | |
| 8x | 32px | 2rem | |
| 9x | 36px | 2.25rem | |
| 10x | 40px | 2.5rem | |
| 11x | 44px | 2.75rem | |
| 12x | 48px | 3rem | |
| 13x | 52px | 3.25rem | |
| 14x | 56px | 3.5rem | |
| 15x | 60px | 3.75rem | |
| 16x | 64px | 4rem | |
| 17x | 68px | 4.25rem | |
| 18x | 72px | 4.5rem | |
| 19x | 76px | 4.75rem | |
| 20x | 80px | 5rem | |
| 21x | 84px | 5.25rem | |
| 22x | 88px | 5.5rem | |
| 23x | 92px | 5.75rem | |
| 24x | 96px | 6rem | |
| 25x | 100px | 6.25rem | |
| 26x | 104px | 6.5rem | |
| 27x | 108px | 6.75rem | |
| 28x | 112px | 7rem | |
| 29x | 116px | 7.25rem | |
| 30x | 120px | 7.5rem | |
| 31x | 124px | 7.75rem | |
| 32x | 128px | 8rem | |
| ... | |||
The spacing and sizing system is constructed using a base unit of 4 pixels.
Basic usage
Apply a spacing
Apply the defined spacing variables using the inherited syntaxes margin-left, margin-right, margin-top, margin-bottom, margin-x, margin-y, margin, margin-inline-start, margin-inline-end, margin-inline, padding-left, padding-right, padding-top, padding-bottom, padding-x, padding-y, padding, padding-inline-start, padding-inline-end, padding-inline, text-underline-offset, top, bottom, left, right, inset, transform, border-spacing, stroke-dashoffset, x, y, cx, cy, column-gap, row-gap, gap, outline-offset, scroll-margin-left, scroll-margin-right, scroll-margin-top, scroll-margin-bottom, scroll-margin-x, scroll-margin-y, scroll-margin, scroll-padding-left, scroll-padding-right, scroll-padding-top, scroll-padding-bottom, scroll-padding-x, scroll-padding-y, scroll-padding, shape-margin.
<div class="mt:1x p:4x">…</div>