The most common client note on a first design is that there is too much empty space and something should go there. That space is doing a job, and filling it is the fastest way to make a site feel cheap.
White space is the empty area between elements, and it controls readability, hierarchy and perceived quality. It is not wasted room. Generous, consistent spacing makes a page feel considered and expensive; cramped spacing makes the same content feel cheap, regardless of how good the typography and colour are.
What it actually does
- Groups related things. Elements close together read as related; the space around a group separates it from the next.
- Creates hierarchy. Space around an element draws attention to it more reliably than making it bigger.
- Improves readability. Line spacing and margins directly affect how easily text is read.
- Signals quality. Compare a luxury brand's site with a discount retailer's. The difference is largely spacing.
Proximity is the underlying principle
Things placed close together are perceived as belonging together. That is not a style preference, it is how visual perception works.
Which means spacing is functional. A heading sitting equidistant between the paragraph above and below it belongs to neither, and the reader has to work out which section it introduces. Put it close to the text it heads.
Use a spacing scale
Arbitrary spacing is what makes a design feel untidy even when nothing is obviously wrong. Pick a base unit, usually 4 or 8 pixels, and use multiples of it everywhere.
| Gap | Typical use |
|---|---|
| 8px | Between tightly related items, label and field |
| 16px | Between paragraphs |
| 24 to 32px | Between subsections |
| 48 to 64px | Between major sections |
| 80 to 120px | Between page sections on desktop |
Consistency matters more than the exact numbers. Two similar gaps that differ by 3 pixels read as a mistake even when nobody can say why.
When clients ask to fill it
The instinct is that empty space is wasted, especially above the fold where it feels like lost opportunity. The result of filling it is a page where everything competes and nothing stands out.
The useful reframe: the goal is not to fit more on screen, it is for the important thing to be noticed. Adding a third element to a section usually means the first two get less attention, not that you communicated more.
Frequently asked questions
What is white space in design?
The empty area between and around elements. It does not have to be white; it is simply space with nothing in it. It controls grouping, hierarchy and readability, and it is a deliberate design decision rather than leftover room.
Is white space wasted space?
No. It groups related elements, creates hierarchy and makes text readable. Filling it typically reduces how much a visitor takes in, because everything competes for attention and nothing stands out.
How much space should there be between sections?
On desktop, typically 80 to 120 pixels between major sections and 24 to 32 between subsections, using a consistent scale based on a 4 or 8 pixel unit. Reduce proportionally on mobile where vertical space is scarce.
Does white space affect conversion?
Indirectly but reliably. Space around a call to action makes it more noticeable, and readable text keeps people on the page. Cramped layouts increase cognitive load, which shows up as people leaving rather than as an obvious complaint.
Why do premium brands use so much space?
Because generous spacing signals confidence and quality. A page that does not need to shout everything at once reads as considered. Discount retailers use dense layouts deliberately, to signal abundance and value.