The Five Spacing Decisions That Fix Most UI
When an interface feels off and you cannot say why, the answer is usually spacing. Not the palette, not the typeface – the gaps. Spacing is the invisible system that tells the eye what belongs together, what is separate, and what matters most, and it fails silently: no linter flags a 13px gap, no reviewer writes “the rhythm is broken.” After years of auditing my own interfaces and other people’s, almost every spacing fix I make is one of the same five decisions.
TL;DR
- Adopt a scale and refuse everything off it. 4, 8, 12, 16, 24, 32, 48, 64. A 13px gap is not a design decision; it is a drift.
- Space between groups must exceed space within groups. This single Gestalt rule replaces most borders and boxes.
- Give every container one padding value, derived from its role – component 16, card 24, section 32-48 – instead of eyeballing each edge.
- Let whitespace do hierarchy before you reach for dividers. Borders are what spacing looks like when it gives up.
- Fix vertical rhythm at the text level – line-height 1.5 minimum, spacing after headings smaller than spacing before them – or nothing above it can rescue the page.
1. Adopt a Scale, Then Refuse Everything Off It
The first decision is not which values to use; it is agreeing that there is a set of values. Mine is a 4px base: 4, 8, 12, 16, 24, 32, 48, 64.
| Token | Value | Use |
|---|---|---|
| xs | 4px | Inline elements, icon gaps |
| sm | 8px | Related items within a group |
| md | 16px | Standard component padding |
| lg | 24px | Card padding, section gaps |
| xl | 32px | Major section separation |
| 2xl | 48px | Page-level sections |
| 3xl | 64px | Hero sections |
The specific numbers matter less than the refusal. Arbitrary values – 13px, 7px, 22px – break rhythm in a way the eye registers as sloppiness without being able to name it. The rule I hold myself to: every spacing value comes from the scale or carries a documented reason. In practice the documented exceptions almost never survive review, because “it looked right at the time” is not a rationale, it is the drift the scale exists to prevent.
A scale also collapses decisions. Without one, every gap is a fresh judgment call made at implementation speed; with one, most gaps have exactly one plausible token, and design review argues about the interesting cases instead of the arithmetic.
2. Space Between Groups > Space Within Groups
If you take one sentence from this post: the gap between groups must be visibly larger than the gap inside them. This is Gestalt proximity doing load-bearing work – the eye reads relative distance as relationship, automatically and pre-verbally.
A form where the label sits 8px from its field, and fields sit 24px from each other, needs no boxes, no dividers, no background tints: the grouping is self-evident. Flatten those distances to a uniform 16px and the same form becomes a haze of equally-spaced rows the user has to parse consciously.
The failure mode is almost always compression at the wrong level: a designer tightens the between-group gap to fit more above the fold, the ratio collapses, and then – feeling the grouping dissolve – adds borders to restore it. Which brings us to decision four. But first:
3. One Padding Per Container, Derived From Role
Containers accumulate asymmetric padding the way kitchens accumulate junk drawers – a nudge here to fit a button, a tweak there for an icon, until a card has 18px top, 14px left, and nobody remembers why. The fix is a standing derivation: a container’s padding comes from its role, not its contents.
- Components (buttons, inputs, chips): 16px
- Cards and grouped content: 24px
- Sections: 32-48px
- Page-level and hero regions: 48-64px
When content does not fit a role’s padding, the content is wrong for the container – split it, shorten it, or promote the container a level. Adjusting the padding to rescue one awkward child breaks the rhythm for every sibling, and the asymmetry reads as a bug even to users who could never articulate it.
4. Whitespace Before Borders
Most dividers are apologies. The border under every list row, the box around every form section, the hairline between every card – each one is spacing that gave up. Boundaries do create groups (Gestalt’s common-region principle is real), but they are the strong medicine: visually loud, additive, and compounding – every border is one more line the eye must process.
My working order: try the proximity ratio first (decision two). If groups still will not separate, try a background shift before a stroke. Reach for borders when regions genuinely need hard edges – tables, editable regions, nested cards – and then commit to them. An interface that alternates between whitespace-grouping here and border-grouping there reads as two design systems fighting.
The test I apply in review: delete every non-table border on the screen. Whatever grouping survives was real; whatever dissolves was spacing debt the borders were servicing.
5. Fix Vertical Rhythm at the Text Level
Spacing systems die from the bottom. If body text runs line-height 1.2, no amount of section spacing rescues the page – the paragraphs themselves read as cramped, and everything built on them inherits the tension. The floor: 16px body, line-height 1.5-1.75, 65ch max width. That is not a style preference; below it, reading measurably degrades.
Above the paragraph, the rule that organizes everything else: a heading sits closer to the content it introduces than to the content it follows. Space-before larger than space-after – typically double. A heading floating equidistant between sections belongs to neither; the asymmetry is what binds it to its own content. This is decision two again, operating inside the type column, which is the point: vertical rhythm is not a separate discipline, it is the proximity rule applied at the smallest scale.
The Audit
The five decisions compress into a review checklist I run against any screen:
- Is every gap on the scale? (Inspect the odd ones – they are always accidents.)
- Is every between-group gap larger than the gaps inside those groups?
- Does each container carry one role-derived padding?
- Could any border be deleted after fixing the spacing behind it?
- Does the type column hold its own rhythm – 1.5+ line-height, headings bound to their content?
Most screens fail two or three of these, and fixing them changes the feel more than any palette or typeface swap. Spacing is where craft hides, precisely because nobody can point at it.
FAQ
What spacing scale should a design system use?
A 4px base scale – 4, 8, 12, 16, 24, 32, 48, 64 – covers nearly every interface need. The exact values matter less than exclusivity: every gap comes from the scale or carries a documented rationale. Arbitrary values (7px, 13px, 22px) break visual rhythm in ways users feel but cannot name.
How do you group UI elements without borders?
With the proximity ratio: space between groups must visibly exceed space within them. An 8px label-to-field gap with 24px between fields groups a form with no boxes at all. Reserve borders for regions that need hard edges – tables, editable areas – and prefer a background shift as the intermediate step.
How much padding should cards and buttons have?
Derive it from the container’s role: ~16px for components (buttons, inputs), 24px for cards, 32-48px for sections, more for hero regions. One value per container – if content will not fit the role’s padding, change the content or promote the container rather than hand-tuning edges.
What is vertical rhythm in typography?
The consistent spacing pattern down a text column: body at 16px minimum with 1.5-1.75 line-height, around 65 characters per line, and headings placed closer to the content they introduce than to what they follow. Everything larger inherits from this level – if the paragraphs are cramped, no section spacing fixes the page.
