The rule
Related things are closer to each other than to anything else. That is the whole of it, and it is a rule about relative distance, not absolute values.
A label 4px from its field and 16px from the next field is grouped. The same label 12px from both is ambiguous, and the reader has to work out the pairing from meaning instead of from position — which is slower and occasionally wrong.
Grouping by proximity beats every other mechanism available. Borders, boxes and background tints all work, but they add ink; space groups for free.
The three spacings that matter on any screen
| Gap | What it separates | Rough ratio |
|---|---|---|
| Tight | A label and its value; an icon and its text | 1 |
| Medium | Sibling items inside a group; rows in a list | 2–3× tight |
| Loose | One group from the next; sections of a page | 5–8× tight |
If your medium and loose gaps are the same number, you have two levels of structure rendered as one, and the page reads as a flat list of everything.
Use a scale, not arbitrary numbers
Pick a small set — 4, 8, 12, 16, 24, 32, 48 — and use only those. The reason is not tidiness. It is that a limited set forces the relative decisions to be deliberate: choosing between 16 and 24 is a real choice about grouping, whereas choosing 19 is an accident that reads as noise.
Consistency in spacing is also what makes a screen feel finished. Most pages that "look unpolished" have no typographic problem at all; they have six different gaps that mean nothing.
Where it goes wrong in practice
- Uniform padding everywhere. Every element in its own equal box. Nothing is grouped, so the reader groups by reading.
- Labels floating between two fields, ambiguous by position.
- Buttons equidistant from two records in a list, so it is genuinely unclear which row they act on — this one causes real errors, not just slowness.
- Section gaps smaller than internal gaps, which visually merges sections that are logically separate.
- Cards inside cards inside cards, where nesting substitutes for spacing and every level adds a border.
- Whitespace treated as free. On a long list it is not: every extra pixel of row height is a row that fell off the screen, and comparison is the thing you are spending it on.
The relationship to density
Spacing and density pull in opposite directions and both are correct in different places. Generous space between a few important things aids focus. The same space between many comparable things destroys comparison, because distance is exactly what makes comparing expensive.
So the question is never "is this page too tight or too loose" — it is what is this screen for. A record page can breathe. A queue of two hundred rows cannot.
The test
Squint, or shrink the browser to 25%. You should see distinct clumps that match the logical structure. If it is one even grey field, nothing is grouped; if it is scattered islands with no relationship, the levels are wrong.