Design Atlas
한국어
▦ Layout

Whitespace

여백

The empty space between elements — not "nothing", but a design tool that signals what belongs together and what matters most.

Also known as: Negative spaceWhite space
···
html
<div class="pair">
  <div class="panel tight">
    <b class="lbl">Cramped</b>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i><i class="ln l3"></i></div>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i></div>
  </div>
  <div class="panel roomy">
    <b class="lbl">Spacious</b>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i><i class="ln l3"></i></div>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i></div>
  </div>
</div>
css
.pair{display:flex;gap:4%;width:min(94%,560px);height:min(88%,260px)}
.panel{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;position:relative}
.lbl{position:absolute;top:6px;left:8px;font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.tight{padding:8px;gap:4px}
.roomy{padding:8px;gap:4px;transition:padding .9s ease,gap .9s ease}
.tight .card{padding:6px;gap:3px;margin-top:16px}
.roomy .card{padding:10%;gap:8%;margin-top:16px;transition:padding .9s ease,gap .9s ease}
.card{display:flex;flex-direction:column;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.card+.card{margin-top:6px}
.ln{display:block;height:6px;border-radius:3px;background:var(--line)}
.l1{width:82%}.l2{width:64%}.l3{width:46%}
js
const roomy = document.querySelector('.roomy');
let big = true;
setInterval(() => {
  big = !big;
  roomy.style.padding = big ? '16px' : '8px';
  roomy.querySelectorAll('.card').forEach((c) => { c.style.padding = big ? '16px' : '6px'; c.style.gap = big ? '10px' : '4px'; });
}, 1600);

Tight whitespace (micro whitespace) reads nearby elements — text, an icon — as one group; generous whitespace (macro whitespace) reads as a break between sections. The amount of space is literally how you implement Gestalt proximity.

More whitespace makes the same content feel more premium and unhurried, which is why luxury brands put less on a screen and give it more room. Less whitespace raises information density, which suits dashboards and tables where people need to scan a lot at once.

Whitespace isn't leftover space — it has to be budgeted from the start of the design, not squeezed in afterward. Retrofitting it almost always comes up short.

When to use

If feedback says a screen feels "cramped," widen whitespace before adding more elements. The problem is usually a lack of space, not a lack of content.