What is White Space?

Blank areas are a working part of a layout, not leftover room. Pack too much content into one screen and visitors hit information overload: reading slows down, and the page becomes hard to scan. Space between blocks of content creates a better user experience because each piece gets room to register before the next one starts.

White space also directs attention. Adding extra space around one element, such as a call to action, turns it into the page’s focal point. Without that breathing room, nearby elements compete for attention, and nothing stands out. Consistent spacing is also how a layout achieves visual balance and a clear hierarchy.

Micro vs. macro white space

Designers split white space into two scales, and each one does a different job:

• Micro white space is the small space within and between close elements: line spacing, letter spacing, the gaps between paragraphs, and the space separating menu links or grid images. It controls legibility and how quickly people can read.
• Macro white space is the large space between major layout blocks and around the edges of the page. It organizes the design, separates sections, and guides the eye from one area to the next.

You’ll also see the terms active and passive. Active white space is placed deliberately to steer the reader’s focus, often toward a call to action. Passive white space is the default spacing between letters, lines, and elements that keeps content readable without anyone noticing it.

A classic example: Google’s homepage

Google’s homepage is the best-known case of macro white space at work. For years the page held little more than a logo, a search box, and two buttons; as of August 2026, it centers on an AI prompt box (“What’s on your mind?”) with a handful of extra controls, and nearly everything else is still empty. All that space gives the visitor exactly one job: type a query. According to the Interaction Design Foundation, Google’s early user tests found people so unused to that much emptiness that they waited for the rest of the page to load, so designers added the copyright notice at the bottom to signal the page was finished. The emptiness isn’t wasted space; it’s what does the focusing.

How to add white space

On the web, most white space is a few lines of CSS. Use margin to add space between elements and padding to add space inside them, then adjust line-height and letter-spacing to open up dense text. In WordPress, the block editor’s Spacer block adds space between blocks without code, with a height you can set in pixels, ems, or percentages.

Start with your busiest page. Add space around the primary call to action, raise the line height in dense paragraphs, and separate anything competing for the same spot. When everything is emphasized, nothing is.