White space

White space is the unoccupied space between and around elements. It can be any background color.

Browse more examples →
From the collection

What it means

Space helps separate groups, establish hierarchy and give important content room to be noticed. It also communicates relationships: a heading placed closer to its paragraph usually feels connected to it. Large empty areas are only one expression of whitespace; the gaps inside a button or between lines matter too.

Use it in practice

Adjust spacing around groups before adding more borders or decoration. Compare the page at desktop and mobile widths.

Watch out for

Empty space without a purpose can make related information feel disconnected. Do not use a large gap to compensate for unclear content order.