Spacing Scale
间距系统
Aliases:间距系统间距阶梯间距规范为什么留白忽大忽小间距尺寸spacing scalespacing tokens4pt grid
What is it
A fixed ladder of spacing steps (4, 8, 12, 16, 24, 32, 48px, usually multiples of 4 or 8) that all padding, margin and gap values come from. Drawing every gap off one ruler instead of inventing numbers keeps density consistent, and spacing also signals grouping: the larger the gap, the looser the relationship between elements.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Many components and pages need one density rhythm instead of ad-hoc numbers
- The design system must ship spacing tokens for padding, margin and gap
- Grouping and hierarchy should come from spacing, not divider lines everywhere
✕ When not to use
- A one-off illustration or layout experiment where spacing should stay free
- Optical alignment still needs hand tuning rather than a fixed step
- Too many steps (one every 2px) makes picking slower, not easier
Variants
Linear 4px
4px 线性
Every step a multiple of 4 — the most common and granular
8px base
8px 基准
Based on 8 with 4 and 12 as fillers — a looser rhythm
Semantic spacing
语义间距
Named inline / stack / section by relationship — stable across components
Implementation
--space-1: 0.25remgap: var(--space-4)padding: var(--space-3) var(--space-4)margin-block: var(--space-6)gap: calc(var(--space-4) * var(--density, 1))Define six to eight rem steps — --space-1 through --space-8 (4/8/12/16/24/32/48/64px). Components reference tokens only, never raw numbers; siblings share one step, and larger groups take larger steps. Scale the whole density with one multiplier (--density) and tighten it per breakpoint or dark theme. Merge steps that are too close; keep the ladder under eight entries.
Platform API
gappaddingmargincalc()--space-4In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | gap / padding / margin The three properties spacing lands on |
| Tailwind CSS | p-4 / gap-4 (spacing scale) A 4px-based set of multiplier utilities |
| Design tokens | --space-1 … --space-8 |
Related concepts
A length can be absolute (px) or relative: rem scales from the root font size, em from the element's own font size, % from the container, and vw/vh from the viewport. When a user raises the browser's default font size, px layouts refuse to move while rem-based ones grow with it. Prefer rem for type, spacing and radius; keep px for borders and hairlines.
FoundationSimilarRounding a box's corners softens it; the bigger the radius, the more it reads as a card or bubble. Radius must scale with the component — small on buttons, medium on cards, large on containers — so everything looks like one family. Adjacent rounded boxes leave an awkward notch, fixed with concentric radii (outer = inner + gap) or by aligning them flush.
FoundationSimilarA ratio-based set of font sizes that assigns heading and body levels a stable rhythm. Multiply a base body size by a fixed ratio (1.25 major third, 1.333 perfect fourth) to step upward, producing predictable contrast between headings instead of hand-picked pixels. Ship it as sm/md/lg tokens or fluid clamp() steps.
FoundationUsed withA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsUsed with