Whitespace
Empty space in a design that gives content room to breathe and helps the eye focus.
Plain English
Whitespace is not wasted space — it is the silence that makes the music louder. When you remove whitespace, everything competes for attention equally and nothing stands out. When you add it deliberately, important things feel important, groups of related items clearly belong together, and the whole layout feels considered rather than crammed. The most common amateur mistake is filling every pixel.
Technical
Whitespace in CSS is created through padding, margin, gap, line-height, letter-spacing, and explicit height/min-height values. It falls into two categories: macro whitespace (space between major page sections) and micro whitespace (space between elements within a component). Both are equally important and should be governed by a spacing system.
Live Demo
No whitespace — suffocating
Design Fundamentals
Typography sets the tone of your interface. A well-chosen typeface communicates personality before a word is read. Pair it with the right line height and your content becomes effortless to scan. Good spacing is invisible — poor spacing is immediately felt. Typography sets the tone of your interface. A well-chosen typeface communicates
Every decision in UI design affects how users feel, even when they cannot articulate why.
Generous whitespace — calm
Design Fundamentals
Typography sets the tone of your interface. A well-chosen typeface communicates personality before a word is read. Pair it with the right line height and your content becomes effortless to scan. Good spacing is invisible — poor spacing is immediately felt.
Every decision in UI design affects how users feel, even when they cannot articulate why.
Whitespace isn’t empty space — it’s breathing room.
Usage
✓ Good usage
Add 96px of vertical padding above and below the hero section to give the headline space to breathe and signal that this is the most important content on the page.
✗ Bad usage
Filling every row of a dashboard with tightly packed data and zero margin between panels — the result feels overwhelming and users struggle to know where to look.
Recommended values
- 4–8px — micro whitespace (icon-to-label, badge padding)
- 16–24px — component-level whitespace (card padding)
- 32–48px — between components in a section
- 64–96px — between major page sections
- 128px+ — hero-level breathing room
Common mistakes
- Treating whitespace as wasted space that should be filled — it's an active design element.
- Using inconsistent spacing values (13px here, 17px there) instead of a spacing system.
- Reducing whitespace on mobile to fit content — often better to reduce content instead.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use generous whitespace throughout: 96px vertical padding on the hero, 48px between sections, 24px card padding, and 16px between list items. Never let two major sections touch without space between them.