Skip to content
UX Atlas
Plate FND·004 · UI foundationGrid D2 · Rev. 2026-08-14

Proximity

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

UI foundationEstablished researchFoundational

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 plate
  1. 1Definition
  2. 2Spacing is a statement about meaning
  3. 3The spacing relationship, expressed in tokens
  4. 4Where proximity does the work
  5. 5The spacing relationships that decide grouping
  6. 6In practice
  7. 7Local chart
  8. 8Sources
  9. 9Continue from here

Reach for this when

  • Defining spacing tokens.
  • Reviewing forms and long-form content.
  • Diagnosing layouts that read as disorganised.

Common mistakes

  • Uniform spacing everywhere, which removes all grouping information.
  • Adding borders to fix a spacing problem.
  • Grouping that contradicts the markup, which is confusing for sighted users and invisible in the accessibility tree.
  • Adding a border to fix a grouping problem that was caused by the spacing being uniform.

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.

The spacing relationships that decide grouping

Every one of these is a ratio, not a value. What matters is that the inner space is clearly smaller than the outer.

RelationshipTypical ratioFailure when it is wrong
Label to its fieldTightest space in the formThe label attaches to the field above
Field to the next fieldTwo to three times the label gapThe form reads as one undifferentiated block
Field group to the next groupTwice the field gap, or a headingSections stop being sections
Heading to its contentCloser above than belowThe heading reads as belonging to the previous block
Card padding to card gapPadding smaller than the gapCards merge visually into a grid of noise

In practice

  1. i.

    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.

  2. ii.

    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.

  3. iii.

    Equal spacing everywhere

    Uniformity destroys grouping

    A form with one spacing value between every element says that nothing belongs to anything. Grouping is expressed by difference, so a single spacing token used uniformly removes the only signal available.

Local chart

FND·004 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Law of PrägnanzLAW·017 · PRINCIPLES BEHIND THISMiller's LawLAW·004 · PRINCIPLES BEHIND THISCognitive LoadPSY·001 · PRINCIPLES BEHIND THISForm UX ChecklistCHK·001 · CHECK YOUR WORKChunkingTERM·008 · SHORT DEFINITIONGestalt PrinciplesTERM·056 · SHORT DEFINITIONWhitespaceTERM·055 · SHORT DEFINITIONAlignmentFND·003 · RELATED CONCEPTBorders and DividersFND·047 · RELATED CONCEPTCommon RegionFND·006 · RELATED CONCEPTSimilarityFND·005 · RELATED CONCEPTSpacing SystemsFND·042 · RELATED CONCEPT

Sources

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

  1. [1]

    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.