visual design
Whitespace
What is whitespace?
Whitespace (or negative space) is the empty area between and around elements. It’s not wasted space: it groups related items, guides the eye, and makes a layout easy to read.
Also known as: negative space
Prefer to watch?
Watch the recap 0:33
The demo
Adjust the spacing of the card below using the controls to see how readability, line-height, and margins change.
The Power of Breathing Room
When text is crammed together, the brain struggles to distinguish words and groups. Legibility drops because elements compete for your attention. Providing margin and padding makes reading effortless.
What this demo shows (text version)
An interactive card with adjustable layout spacing. Toggling 'Cramped' sets padding, margins, line-height, and element gaps to zero, collapsing all visual structure. Toggling 'Breathing' sets them to a balanced layout.
A fine-tune slider allows resizing the spacing smoothly from 0px to 48px. Additionally, checking the checkbox applies the cramped styling to the parent entry page, demonstrating that spacing makes the entire page readable.
Whitespace - the empty area between and around elements - isn’t wasted space: it groups what belongs together, guides the eye, and makes a layout legible. Give content room to breathe and reading gets easier; cramming things in to 'use the space' usually makes them harder to take in, not more generous.
Same words, same card - but the moment you gave it room to breathe it got easier to read. Whitespace isn't empty; it is the thing doing the grouping.
Cramming never saves space, it just bills the reader for the room you kept. A dense screen feels efficient to the person who built it and exhausting to the person using it.
My rule: space is a grouping tool before it is a decorative one. Things set close together read as related, things set apart read as separate - so before you reach for a box or a divider, try moving things nearer or further apart first.
Try the interactive demo on site:uxbyexample.co.uk to see how whitespace groups elements and reduces visual clutter. Don’t mistake empty space for wasted room - it’s the quiet hero of legible layouts, and you can experiment with it here on site:uxbyexample.co.uk.
On site:uxbyexample.co.uk, whitespace isn’t empty - it’s intentional breathing room that makes layouts readable, not cramped. Try adjusting the demo here to see how spacing affects your eye’s path - this is the real example, not a screenshot.
Try the hands-on demo on site:uxbyexample.co.uk to see how whitespace transforms layout and readability - it’s not empty space, it’s intentional breathing room. You’ll notice how spacing affects grouping and flow - this isn’t theory, it’s live on site:uxbyexample.co.uk, where you can adjust it yourself.
Try adjusting whitespace on site:uxbyexample.co.uk to see how breathing room affects readability - it’s not wasted space, it’s intentional design. This page’s interactive demo lets you test whitespace’s impact - no screenshots, no external tools, just real-time control on site:uxbyexample.co.uk.