Skip to content
UX Atlas
UI foundationEstablished researchFoundational

Proximity

Things placed close together are read as belonging together, before anything is read.

Definition

A Gestalt grouping principle. Spatial nearness is one of the strongest and fastest cues the visual system uses to infer relationship, and it operates automatically before conscious reading.

Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.

On this page
  1. Definition
  2. Spacing is a statement about meaning
  3. The spacing relationship, expressed in tokens
  4. Where proximity does the work
  5. In practice
  6. Sources
  7. Continue from here

Spacing is a statement about meaning

Whenever you set a margin you are declaring a relationship. Space inside a group must be smaller than space around it, or the grouping inverts and the reader binds the wrong elements.

This is the most common cause of forms that feel confusing despite correct markup. A label with equal space above and below floats between two fields and belongs to neither.

The spacing relationship, expressed in tokens

css
/* Inside a field group */
.field label   { margin-block-end: var(--space-2); }  /* 8px  */
.field .hint   { margin-block-start: var(--space-2); }

/* Between field groups */
.form .field + .field { margin-block-start: var(--space-6); } /* 24px */

/* Between sections */
.form section + section { margin-block-start: var(--space-10); } /* 40px */

Space within a group is always a smaller step than space between groups. Keeping this ratio in tokens makes correct grouping the default.

Where proximity does the work

  • Label to input: tight. Field to field: loose. The ratio should be at least two to one.
  • Heading to its paragraph: tighter than paragraph to the next heading. Headings belong to what follows them.
  • Caption to image: tight enough that no other element could claim it.
  • Button groups: related actions close, destructive actions separated.
  • Table cells: column padding wide enough that adjacent columns do not merge visually.

In practice

The floating label

Forms

Equal margins above and below a label make it ambiguous. Halving the space beneath it resolves the ambiguity instantly, with no new elements.

Headings that belong upward

Long-form content

A heading with equal space above and below reads as separate from its section. Giving it roughly twice the space above binds it to the content it introduces.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  • Untersuchungen zur Lehre von der Gestalt

    M. Wertheimer, Psychologische Forschung, 1923

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA FormSettings

Principles behind this

The reasoning this solution is an application of.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.