White Space in Web Design

White space is the grouping mechanism, and it operates before anyone reads a word. The eye decides what belongs with what based on proximity alone. That makes spacing a structural decision, not a decorative one — which is why a cramped page reads as unprofessional even to someone who could not say why.

The one rule that fixes most cluttered pages

Space inside a group must be smaller than space around it.

A heading sitting twenty pixels from the paragraph above and twenty pixels from the paragraph below belongs to neither. A caption equidistant from its own image and the next block is orphaned. In both cases nothing is technically wrong, and in both cases the page is harder to read than it should be.

Apply it as a hierarchy of gaps:

/* Проміжки зростають разом із рівнем угруповання. */
p + p            { margin-block-start: var(--space-4); }  /* 1rem   — всередині думки */
h2               { margin-block-start: var(--space-10); } /* 2.5rem — нова думка */
section + section{ margin-block-start: var(--space-16); } /* 4rem   — новий розділ */

When these three values are too close together, the page reads as one undifferentiated block regardless of how good the typography is.

Macro and micro space do different jobs

Macro space is the large stuff: page margins, gaps between sections, the width the content is constrained to. It sets the pace and signals confidence. Generous outer margins are most of what separates a page that looks considered from one that looks crammed.

Micro space is line height, letter spacing, the gap between a label and its field, padding inside a button. It decides whether text is comfortable to read, and it is where most amateur work falls short — usually through a line height near 1.2 on body text where 1.5 to 1.7 is comfortable.

Both matter, and they fail differently. Bad macro space looks cheap; bad micro space is tiring to read.

Space as emphasis

Isolation is the cheapest form of emphasis available. An element with room around it reads as important without being larger, bolder or a different colour — which means it does not spend any of your limited attention budget on visual noise.

This is why a single call to action surrounded by space outperforms the same button crowded by three links. It is also why pricing tables work best when the recommended tier gets extra room rather than extra decoration.

Line length is space too

Comfortable reading tops out at roughly 60 to 75 characters per line. Beyond that, the eye loses its place on the return sweep and reading speed drops measurably.

.prose { max-width: 68ch; }

The ch unit is tied to the font's character width, so the constraint holds when the typeface changes. This is one place where a full-width layout is straightforwardly wrong, however much screen there is to fill — a point that follows from choosing fonts as much as from layout.

Use a scale, not judgement

Deciding spacing case by case produces eleven slightly different gaps and a page that feels untidy for reasons nobody can point at. A scale removes the decision: 4, 8, 12, 16, 24, 32, 48, 64.

The values matter less than the discipline of only using values from the set. In a block theme this is what the spacing and layout settings enforce, and defining the scale in theme.json means editors can only choose steps that exist.

The objection about the fold

Someone always argues that space pushes content down. They are right, and it usually does not matter.

People scroll without being asked. What stops them is not distance but doubt — a dense wall of text at the top gives no signal that continuing is worthwhile. Space is what makes the first screen legible enough to earn the scroll.

Where the objection has force is on a page with a single decisive action, such as a landing page. There the balance shifts, and the reasoning is in landing page design.

Common mistakes

• Filling space because it is there. An empty area is not a bug report.
• Equal margins above and below headings. The heading then belongs to nothing.
• Tight line height on body text. Below about 1.4 it becomes work to read.
• Padding inside a container but none outside it. Content ends up welded to the browser edge on a phone.
• Different spacing on every page. The clearest sign a site was assembled rather than designed.
• Dividers instead of space. A line is a heavier solution to a problem space already solves.

Verify

Squint at the page. The groups you see should be the groups you intended — if two unrelated blocks read as one, the space between them is too small relative to the space inside them. Then check on a phone, where margins collapse first and cramped spacing shows up worst, using the responsive design checklist.

The wider set of ideas this belongs to is in web design principles.