Whitespace
Whitespace, also called negative space, is the empty area between and around the elements of a page, including margins, padding, and the gaps between text, images, and buttons.
In depth
Whitespace is not wasted space; it is an active design tool. Macro whitespace separates large blocks and gives a layout room to breathe, while micro whitespace, such as line height and the gap between a label and its field, controls legibility at the detail level. Generous spacing around a call to action isolates it from surrounding noise, which raises the odds it gets clicked, and ample line spacing measurably improves reading comprehension and lowers cognitive load.
The common pitfall is fear of empty space: stakeholders cram every pixel with copy, badges, and offers because blank areas "look unfinished." The result is a dense page that feels overwhelming and converts poorly. In a quiz funnel, whitespace keeps each question screen calm so respondents focus on one decision at a time, and it frames the result page score so the most important number is surrounded by space rather than buried in clutter.
Example in practice
Frequently asked questions
Does whitespace have to be white?
No. Whitespace simply means empty space, and it can sit over any background color, image, or texture. The point is the absence of content, not the color itself.
How does whitespace support visual hierarchy?
Spacing groups related items and isolates important ones, which reinforces the order in which the eye reads a page. A button surrounded by space reads as more important than one packed against other elements.
Can a page have too much whitespace?
Yes. Excessive spacing can push key content below the fold or make a page feel sparse and disconnected. The goal is balance, enough to focus attention without forcing unnecessary scrolling.