Proximity
The Gestalt principle that elements placed close together are perceived as related.
Plain English
Proximity is the simplest layout principle in UI design: put related things close together and unrelated things far apart. A label and its input should be close (8px). An input group and the next input group should have more space (24px). A section and the next section need the most space (48-64px). When spacing is consistent with these relationships, the brain reads the layout almost automatically. When it is not, users must read everything to understand the structure.
Technical
In CSS, proximity is controlled by gap, margin, and padding values. A key technique: use a spacing system where the gap between elements is always smaller than the gap between groups, which is always smaller than the gap between sections. This creates clear visual clustering that communicates data structure without labels. In form design, label-input proximity (label immediately above the input, 4-6px gap) makes the field feel like a single unit.
Live Demo
Proximity in Form Design
❌ Equal spacing — confusing
Name
Password
Label equidistant from fields above & below
✓ Grouped spacing — clear
mb-1 between label/input, mb-4 between groups
Elements close together are perceived as related. Gap = relationship.
Usage
✓ Good usage
Place field labels 4px above their input, group related fields with 16px vertical spacing, and separate field groups with 32px — users instantly understand which labels belong to which inputs.
✗ Bad usage
Equal 24px spacing between label and input, between fields, and between sections — nothing clusters, so nothing reads as related.
Recommended values
- 4-8px — label to input gap (label belongs to this input)
- 12-16px — within a component group
- 24-32px — between component groups
- 40-64px — between major sections
- Always: the gap within a group < gap between groups
Common mistakes
- Label-to-input gap larger than input-to-input gap — makes the label feel like it belongs to the next field.
- Equal spacing throughout the page — defeats the grouping signal.
- Using borders or boxes to group instead of proximity — proximity is more elegant.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use proximity to structure forms: label 4px above its input, 16px between fields in a group, 32px between field groups, 48px between form sections. The spacing hierarchy communicates the information architecture.