The Problem It Solves
Random gaps make related items look unrelated.
When a label floats far from its input, your brain treats them as separate items. That adds friction to every scan and every click.
Group Inside, Separate Outside
Inside one group
8-12px
Between groups
24-32px
Keep nearby elements close if they belong to one decision. Increase distance when the user should mentally switch contexts.
Where It Breaks Most
- Form labels far from inputs
- Card metadata drifting between sections
- Nav links with inconsistent gaps
These mistakes are spacing bugs, not style bugs. Fix the spacing system and clarity jumps immediately.
Exercise
Choose the spacing rule that creates the clearest grouping.
Proximity
A grouping signal where near elements are perceived as part of the same unit.
Spacing Rhythm
A repeated distance pattern that makes grouping and section boundaries predictable.