# Space by relationship: closer means related

UI Tip #002 · Layout & spacing · 2026-10-12 · https://ui.praveenjuge.com/2/spacing-by-proximity

> People read distance as meaning. Keep a label close to its field, and put more space between groups than inside them, so the structure shows before anyone reads.

*Figure: A form whose labels move from evenly spaced to sitting close to their own fields, so each pair reads as a group.*

## Why it matters

Before anyone reads a word, they see the shapes on the screen and group them by distance. Things close together read as one unit; things far apart read as separate. This is the Gestalt principle of proximity. When every gap on a form is the same, each label sits as close to the field above it as to its own, and people have to work out which goes with which.

## How to do it

- Use a few spacing steps, not one. For a form, something like:
  - **4–8px** between a label and its field
  - **20–32px** between one field and the next
  - **48px or more** between sections
- Make each step clearly bigger than the one before, about double. A 12px gap next to a 16px gap doesn't read as a difference.
- Space by meaning: a help text belongs to its field, so it sits close; a button that submits the whole form sits apart from the last field.
- Squint, or blur a screenshot. If the groups still show, the spacing is doing its job.

## When it bends

When items really are equal, like the photos in a grid or the rows of a table, equal spacing is right. That sameness says so.

## Sources

- [Proximity Principle in Visual Design, Nielsen Norman Group](https://www.nngroup.com/articles/gestalt-proximity/)
- [Law of Proximity, Laws of UX](https://lawsofux.com/law-of-proximity/)

---

From [UI Tips by Praveen Juge](https://ui.praveenjuge.com). Free to share, with a link back to https://ui.praveenjuge.com/2/spacing-by-proximity.