Label-to-control gap is where the rule shows most clearly
Aliases: label spacing · field grouping · caption gap
What it is
A stacked form is an alternation: label, control, label, control. If the label sits 20 px from its field and the field sits 24 px from the next label, that label is donated to the field above. No proximity accident is more frequent, or more humiliating — people fill the wrong box and blame their own reading.
The in-group < between-group inequality is easiest to measure on fields, and easiest to catch on the spot. Card grids and nav clusters can break it too; the label–control pair is the diagnostic.
Why it happens
Every gap runs a belonging trial. The alternating rhythm makes those trials dense: ten fields, about twenty judgements. Semantically the label belongs to the next control; visually it belongs to whoever is nearer. A textarea is a tall block; the seam after it is often the same 16 px as a single-line field, so the block absorbs the next label.
Placeholders posing as labels, and floating labels, make the spatial marriage overlap or drift, which makes the judgement drift. An error message parked between label and field splits the pair — the message should hug the control, not join the group as a third wheel.
Where it stops holding
Horizontal forms (label left, control right) compare horizontal distance, plus the vertical distance to the next row: the label must be nearer its own control than the next row’s label. Checkboxes and switches often put the label on the right; tapping the label is tapping the control, so the gap should read as one object, not two.
A labelless search field, or a chart that uses a legend instead of per-item captions, has no diagnostic pair.
Applying it
- Set “label to control” as the in-group step and “control to next label” as the between-group step in the form template; do not tune it per page.
- After a textarea, an uploader, or a section heading, inspect the first following item: the seam after a tall block has to be larger, or it will steal the next label.
- How to check: for every label, measure two distances — to its control, to the previous control. The first must be clearly shorter. Give the measured form to someone who did not design it, hide the label copy, and ask which box this label owns. A wrong point is a reversed seam.
Related
- Same group: F2.06.1 In-group gaps must be clearly smaller than between-group gaps · F2.06.3 A divider cannot rescue a wrong spacing relation
- Nearby: E2.03 Label placement · F2.04 Whitespace · F1.01 Distance between control and its target
- Search terms:
label spacing·orphaned label·form grouping·field caption