Layout & Spacing

Spacing and Grouping

Using proximity, whitespace, and a spacing scale to communicate relationships

Key Insight

Spacing communicates relationships. Elements that belong together should be closer to each other than to unrelated elements — this is proximity, the most fundamental layout principle. A predefined spacing scale (based on a base unit like 8px) removes arbitrary spacing decisions and creates visual rhythm. Generous whitespace is not wasted space; it reduces cognitive load and signals content importance.

Key Points

  • •Proximity: items closer together are perceived as related; space between groups signals separation
  • •Space elements by relationship: tight within groups, loose between groups
  • •Spacing scale: 8px base → 8, 16, 24, 32, 48, 64, 96 (or 4px base for denser UIs)
  • •Whitespace is active: it frames content, signals hierarchy, reduces overwhelm
  • •Be generous with whitespace — most UIs are too dense, not too spacious

Guidelines

  • ✓Never use arbitrary spacing values — always pick from the scale
  • ✓Space between related items should be smaller than space between groups
  • ✓Padding inside a card should be consistent regardless of content
  • ✓Align elements to a grid for structural consistency
  • ✓Test spacing at mobile viewport — generous desktop spacing often needs adjustment

Formula

Spacing relationship rule: gap(within group) < gap(between groups) < gap(between sections)

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics