Styling & CSS · Visual design
Whitespace
Also called: White space, Negative space, Breathing room
Empty space deliberately left on a page to separate content and highlight what matters, so the interface feels uncluttered and is easier to read.
In detail
Whitespace isn't wasted space. It's part of the design. The empty space between elements, between sections, and around text helps users tell which things belong together and where the focus is. With the same content, tight spacing looks cramped, cheap, and hard to read. Add a bit more spacing and the interface instantly feels much cleaner.
A practical rule is "tight within groups, loose between groups." Keep a heading close to the body text under it, and put more distance between different sections, so users can see the groups without any divider lines. Spacing works best with a fixed set of values, like 4, 8, 12, 16, 24, 32, 48. Don't write random values like 13px or 17px.
A common problem with AI-generated interfaces is that they're too cramped, or the spacing jumps around. Instead of saying "make it look nicer," be specific: "48px between sections, 24px card padding."
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-whitespace- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026