White space

White space does not have to be white. It means any area left free of text and images, whatever its colour, and designers also call it negative space. It is easy to see it as wasted room that could hold another offer or photo, but it is doing work: it tells the eye what belongs together and where one idea ends.

It works at two scales. Micro white space is the spacing between lines, letters, list items and form fields. Macro white space is the space around sections, columns and the edges of the page. Both matter, and cramped micro spacing makes text hard to read even on a spacious page.

How it works

The main principle is proximity: items placed close together are read as a group, and a larger gap signals a new group. So the gap between a heading and its paragraph should be smaller than the gap above the heading. Designers usually work from a fixed spacing scale, for example multiples of 4 or 8 pixels, so spacing stays consistent and can be stored in a design system.

Space also creates emphasis. Surrounding one element with generous room, such as a single headline or button, makes it stand out without making it bigger, which supports visual hierarchy.

Spacing is set in CSS as margins, padding and line height, and well-built sites tie these to a few named values rather than typing a new number each time. To judge your own pages, look at a section and ask whether you can tell, without reading, which heading belongs to which paragraph and which caption to which image. If the gaps are equal everywhere, the grouping is unclear. Body line height of around 1.5 times the text size is a comfortable starting point.

Example

A law firm's home page squeezes eight service boxes, a news ticker, two banners and a contact form into the first screen on desktop, and visitors miss the contact details entirely. The redesign shows three main services with space between them, moves the news to its own page and gives the headline and Book a consultation button room to breathe. Less content is visible at once, but more of it is noticed.

On phones, the same page needed a different answer. Desktop spacing copied directly would have placed the button almost two screens down, so the mobile version tightens the gaps between sections while keeping a clear difference between space inside a group and space between groups. The contact details move into a short block right after the services, set off by a larger gap so they read as a section of their own rather than part of the last service.

Why it matters for your business

Cluttered pages make a business look less trustworthy and make visitors work harder to find what they need, so they leave or phone to ask questions the site already answers. Thoughtful spacing makes content easier to scan and gives your key message and call to action room to be seen. The trade-off is real on small screens: too much space pushes content further down, so mobile spacing usually needs to be tighter than desktop rather than simply shrunk.

Common mistakes

• Filling every gap with another banner, badge or link because the space looked empty.
• Using inconsistent spacing, so related items sit further apart than unrelated ones.
• Copying desktop spacing onto phones, which pushes key content far down the page.
• Squeezing line height to fit more text, which makes paragraphs harder to read.

Questions people ask

Is white space wasted space on a website?

No. White space helps people see which items belong together, where sections start and what matters most. Removing it rarely gets more content read; it usually gets less read, because the page becomes harder to scan. The real question is whether each gap is purposeful and consistent, not whether the page is full.

What is the difference between white space and negative space?

In web and graphic design they mean the same thing: the empty areas between and around elements. Negative space is the older art and print term, and it is often used when the empty shape itself forms part of the design, such as an image hidden in the gaps of a logo.

How much white space should a page have?

There is no fixed amount. Use a consistent spacing scale, leave larger gaps between sections than within them, and give the main headline and button enough room to stand out. Then test on a phone, where space is tighter, and check that key information still appears without much scrolling.