Negative Space
The intentional empty area around and between design elements that shapes perception and focus.
Plain English
Negative space is the purposeful use of emptiness as a design element in its own right. It is not "nothing" — it is what separates a cramped, unpolished layout from a confident, premium one. Luxury brands and minimalist products use lots of negative space to signal that each element is important enough to deserve its own room. Used well, negative space guides the eye, creates breathing room, and communicates quality.
Technical
In CSS, negative space is created through padding, margin, line-height, letter-spacing, min-height, and empty grid cells. Macro negative space separates major page sections (created with section padding). Micro negative space lives inside components (created with padding and gap). The discipline is knowing when to add space rather than more content — often the better design choice is to cut elements, not squeeze them.
Live Demo
Cluttered — no negative space
Q3 Summary
Jul–Sep 2024
Margin: 34%
↑ 2.1% vs Q2
Top categories
Negative space — clear focus
Q3 Summary
Jul–Sep 2024
Margin: 34%
↑ 2.1% vs Q2
Negative space is what makes the positive elements feel important.
Usage
✓ Good usage
Place the headline and CTA in the centre of a 600px-tall hero section with 160px top and bottom padding — the emptiness around them makes them feel unmissable.
✗ Bad usage
Reducing the hero section to 200px tall to "show more content above the fold" — compressing space removes the emphasis that made the headline worth reading.
Recommended values
- Macro: 80–120px between major page sections
- Micro: 24–40px inside panels and cards
- Line-height 1.6–1.8 creates generous line-to-line negative space in body copy
- Letter-spacing 0.05–0.1em in uppercase labels adds micro horizontal space
- Empty grid cells used intentionally to create visual rhythm in complex layouts
Common mistakes
- Treating empty space as wasted pixels that should be filled with content.
- Adding more elements when the real problem is not enough space around existing ones.
- Inconsistent negative space that gives some elements more room than others for no design reason.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use generous negative space throughout: 120px above and below each major section, 32px inside panels, and 1.7 line-height on body copy. Let important elements breathe — resist filling every gap.