White space in web design is the empty area around and between elements on a page: the gaps around headlines, the padding inside buttons, the space between paragraphs, images, columns and sections. It is also called negative space, and it does not have to be white. A dark navy background, a soft beige section or a photo with a calm, uncluttered area all count as white space.
Most business owners do not lose visitors because their copy is bad. They lose them because everything is crammed together and the page feels exhausting to read. This guide explains white space in beginner-friendly terms, shows the difference between cluttered and spacious layouts, and gives you the concrete padding and margin numbers our designers apply so you can check your own site in the next 20 minutes.
What is white space in web design? A simple definition
White space is any part of a layout that is intentionally left empty. It is not wasted space and it is not a gap you forgot to fill. It is a design element with a job: to separate, to group, to guide the eye and to give content room to breathe.
Think of a shop. Two stores can sell the same watch. One piles 400 watches into a glass case under fluorescent light. The other places one watch on a linen pad in an empty display. Same product, completely different perceived value. White space on a web page works exactly the same way.
White space includes more than blank background
- The margin outside an element (space pushing other things away)
- The padding inside an element (space between a border and its content)
- The line height between lines of text
- The letter and word spacing inside a sentence
- The gaps between grid items, cards and columns
- The empty parts of an image or an illustration
Macro vs micro white space
This is the single most useful distinction for a non-designer, because it tells you where to look when a page feels “off”.
| Type | What it is | Examples | What it controls |
|---|---|---|---|
| Macro white space | The large empty areas of the layout | Space between sections, page side margins, the calm area around a hero headline, gaps between columns | Structure, rhythm, perceived quality, how easily a visitor can scan the page |
| Micro white space | The small gaps inside and between components | Padding inside a button, line height in a paragraph, space between a label and an input, gap between list items | Legibility, clickability, whether a form feels easy or heavy |
Rule of thumb: if your page looks messy from three metres away, you have a macro white space problem. If it looks fine from far away but tiring to actually read, you have a micro white space problem.
Active vs passive white space
One more layer, quickly:
- Passive white space is automatic and structural: the gap between two lines of text, the margin around the page.
- Active white space is deliberate: extra emptiness placed around a price, a testimonial or a call-to-action button to make it the obvious focal point.
Active white space is the cheapest conversion tool that exists. You do not add anything. You remove things around the element you want people to notice.
Why white space makes pages easier to read
1. It improves legibility and comprehension
Text with generous line height and short line length is measurably easier to read. Industry studies commonly cite legibility gains of around 20% when spacing between lines and around text blocks is increased. Your eye needs a clear return path from the end of one line to the start of the next. Tight leading breaks that path and forces re-reading. There is more on it in Why Whitespace is so Important in Web Design.
2. It groups related things (the proximity principle)
Humans read distance as meaning. Elements that sit close together are perceived as belonging together. If your subheading has the same gap above and below it, the reader cannot tell which paragraph it belongs to. Correct spacing does the explaining for you, with zero words.
3. It creates hierarchy without more design
You do not need bigger fonts, more colours or heavier borders to signal importance. Space around an element is enough. A single button in a wide empty area outperforms three buttons crowded side by side.
4. It signals quality and trust
Spacious layouts are read as more professional and more premium. Dense, edge-to-edge layouts are read as cheap, aggressive or spammy. Fair or not, that judgement happens in the first few seconds, before anyone reads your value proposition. A comparable breakdown sits on wpengine.com.
5. It reduces cognitive load on mobile
On a phone, everything is stacked. Without clear separation between blocks, a mobile page becomes one endless wall of content. Space is what turns that wall into digestible chunks.
Cluttered vs spacious: what it actually looks like
Example A: the cramped hero section
The cluttered version: a headline, a subheadline, two buttons, a trust-badge row and a product screenshot all inside a 380px tall band, each item separated by roughly 8px, section padding of 16px top and bottom, full-width text running 130 characters per line.
The spacious version: same elements, 96px of section padding, 24px between headline and subheadline, headline text capped at 60 characters per line, one primary button with 40px of space above it and the secondary action turned into a plain text link, the trust badges pushed to their own strip with 48px separation.
Nothing was deleted except one button style. The second version reads as calm and confident, and the primary action becomes impossible to miss.
Example B: the wall-of-text service page
The cluttered version: 14px font, 1.2 line height, paragraphs of 12 lines, no gap between paragraphs, headings with equal space above and below.
The spacious version: 17px font, 1.6 line height, paragraphs of 3 to 4 lines, 24px between paragraphs, 56px above each H2 and 16px below it, plus a bulleted list breaking the longest block. Same word count, roughly half the perceived reading effort.
Example C: the crowded card grid
The cluttered version: six service cards with 8px gaps, 12px internal padding, images touching card edges, text touching the bottom border.
The spacious version: 32px grid gap, 28px internal padding, consistent 20px between card image, title and description. Suddenly the reader sees six distinct offers instead of one grey block.
The exact spacing rules our designers apply
We build on an 8-point spacing scale: every gap is a multiple of 8 (8, 16, 24, 32, 40, 48, 64, 80, 96, 120). This one decision eliminates most “why does this look sloppy?” problems, because it makes spacing consistent by default instead of by eye.
Text and typography
| Element | Desktop | Mobile |
|---|---|---|
| Body font size | 17 to 19px | 16 to 18px |
| Body line height | 1.5 to 1.7 | 1.5 to 1.6 |
| Heading line height | 1.1 to 1.25 | 1.15 to 1.3 |
| Line length (measure) | 50 to 75 characters (about 640 to 760px) | 35 to 50 characters |
| Space between paragraphs | 24px (or 1.5x line height) | 20 to 24px |
| Space above an H2 | 48 to 64px | 32 to 40px |
| Space below an H2 | 16 to 24px | 12 to 16px |
| Space above an H3 | 32 to 40px | 24 to 32px |
| List item spacing | 8 to 12px | 8 to 12px |
The non-negotiable one: a heading must always have clearly more space above it than below it. A common ratio is 3:1. If the gap is equal, the heading floats and the reader loses the structure.
Buttons and clickable elements
- Internal padding: 14 to 18px vertical, 28 to 40px horizontal for a primary button
- Minimum tap target: 44 x 44px on mobile, 48px height is safer
- Space above a primary CTA: 32 to 48px, so nothing competes with it
- Space between two buttons: 16px minimum, 24px preferred
- Never place a button closer than 24px to another clickable item on mobile
A button that is 6px taller than its text label reads as a cramped link, not an invitation to click.
Images, cards and grids
- Grid gap between cards: 24px minimum, 32 to 40px for a premium feel
- Card internal padding: 24 to 32px desktop, 20 to 24px mobile
- Space between an image and its caption: 8 to 12px
- Space between an image and the next paragraph: 32 to 40px
- Never let text touch a container edge. Minimum 16px on mobile, 24px on desktop
Sections and page structure
| Spacing | Desktop | Tablet | Mobile |
|---|---|---|---|
| Section padding (top and bottom) | 80 to 120px | 56 to 80px | 40 to 64px |
| Page side margin | 48px+ (or centred container) | 32px | 16 to 24px |
| Max content width | 1140 to 1280px | 100% minus margins | 100% minus margins |
| Max text column width | 640 to 760px | 640px | full width |
| Form field spacing | 20 to 24px | 20px | 16 to 20px |
| Label to input gap | 8px | 8px | 8px |
How to audit white space on your own site in 20 minutes
- Squint at your homepage. Blur your eyes until you cannot read the words. Can you still see distinct blocks? If it looks like one grey mass, your macro spacing is too tight.
- Measure a section. Right-click a section, choose Inspect, and read the padding values in the browser. Below 40px top and bottom on desktop, increase it.
- Check line length. Count the characters in a full line of body text. Over 90? Add a max-width to your text container.
- Check line height. If it is under 1.4 for body copy, raise it to 1.5 or 1.6 and re-read the page. The difference is immediate.
- Check heading gaps. Confirm every heading has more space above than below.
- Check your main button. Is there at least 32px of empty space above it? Is it competing with a second button of equal weight?
- Test on a real phone. Not the desktop preview. Look for text touching screen edges and buttons stacked too close together.
- Verify the scale. Are your gaps random values like 13px, 27px and 41px? Round everything to multiples of 8.
Common white space mistakes
- Filling every gap because empty space feels like wasted opportunity. Space is what makes the rest visible.
- Equal spacing everywhere. If everything is 20px apart, nothing is grouped and nothing stands out. Vary spacing on purpose.
- Generous desktop, cramped mobile. Scale spacing down proportionally, do not delete it.
- Space around the wrong thing. Isolating a decorative image while burying the CTA in clutter.
- Inconsistent gaps between identical components. The fastest way to look unprofessional.
- Too much space, which is rarer but real. If related items look unrelated, or a visitor has to scroll to find the connection between a headline and its supporting text, pull it back.
Does white space help SEO?
Not directly. Google does not measure your padding values. But it does measure how people behave. Readable pages hold attention longer, reduce immediate bounces back to the search results, and score better on Core Web Vitals related to layout stability and interaction, especially when tap targets are properly sized. Google’s own mobile usability guidance flags elements that are too close together. So white space is not a ranking factor, it is a way to improve the signals that are. It is done convincingly by one agency that does this well.
Key takeaways
- White space is the empty area around and between elements. It is a design element, not leftover background.
- Macro white space shapes the layout. Micro white space shapes readability.
- Use an 8-point scale so every gap is consistent.
- Always give headings more space above than below.
- Give your primary call to action room to breathe, then remove its competitors.
- When a page feels cheap, the fix is usually less content and more space, not more design.
FAQ
What does “white space” mean?
It means the empty or unmarked area in a design, around and between text, images, buttons and other elements. It is also called negative space. The name is historical, from print layouts on white paper, and the space can be any colour or texture.
Does white space have to be white?
No. Any calm, content-free area counts, whether it is black, cream, a subtle gradient or the quiet part of a photograph.
What is the purpose of whitespace?
To separate and group content, create visual hierarchy, guide attention to the most important element, improve legibility and make a page feel professional rather than crowded.
What is white space in HTML?
In HTML and programming, whitespace refers to characters such as spaces, tabs and line breaks in the code. Browsers collapse consecutive whitespace in HTML into a single space by default. This is a different concept from the visual white space of layout design, which is controlled with CSS properties like margin, padding, line-height and gap.
How much white space is too much?
You have gone too far when related items no longer look related, when a headline is separated from its supporting text by more space than the gap between sections, or when a visitor must scroll significantly to reach the next meaningful piece of content. Space should organise, not fragment.
What is the difference between margin and padding?
Padding is the space inside an element, between its content and its border. Margin is the space outside an element, pushing neighbouring elements away. Padding gives content room inside a button or card. Margin creates distance between components.
What is white space in business or marketing?
In business strategy, “white space” means an unserved market gap or untapped opportunity. It is a completely different use of the term from white space in web design, so context matters when you read the phrase.
Can I fix white space myself in WordPress, Webflow or Wix?
Usually yes. Most builders expose section padding, container width, line height and grid gap settings without code. Set a global spacing scale first, then adjust section by section. If your theme hard-codes tight spacing, a small amount of custom CSS is enough. An in-depth look at it is worth the time.
Want a second opinion on your layout? Our team at thebalance.cc reviews spacing, hierarchy and readability as part of every website audit, and hands you the exact values to change. Get in touch and we will tell you which three spacing fixes will make the biggest difference on your site.