📊 We use cookies & analytics to improve your experience. Learn more
Latest

UI/UX Design Fundamentals Module 2 · Lesson 4 of 15

0% Exit to course

Module 2 · Layout, hierarchy and type Lesson 4 of 15

Spacing and the 8-point grid

Learning objective

Spacing in consistent steps — 4, 8, 16, 24, 32 — is what makes an interface feel deliberate. Arbitrary numbers are what make it feel accidental.

The concept

Spacing is what makes a layout look deliberate, and the easiest rule that works is the 8-point grid: every margin, padding and gap is 8, 16, 24, 32 — multiples of eight. Pick the scale once, use only those numbers, and unrelated elements start to look related.

Grouping does more than size: elements that belong together sit closer to each other than to their neighbours. A label should be 4px from its input and 24px from the next field, so the eye reads the pairs without being told. Whitespace is not wasted space; it is how the page says what goes with what.

CSS
:root {
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px;
}
.field { margin-bottom: var(--s1); }        /* label 8px from its input */
.field + .field { margin-top: var(--s3); }  /* 24px to the next field    */
.card { padding: var(--s3); display: grid; gap: var(--s2); }

/* Only use these numbers. Never hand-tune a pixel. */

Common mistakes

The mistake is nudging things until they look right at one window size. Fixed multiples of eight survive a resize and a new screen; hand-tuned pixel values do not, and the layout drifts apart the moment somebody adds a line of text.

Worked example

Padding of 13px above and 17px below looks like a mistake at a glance; 12 and 16 looks intentional, and the change costs nothing.

Your practice task

Redo one screen of your own using only spacing values from that grid and compare it side by side with the original.

Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.

Key takeaway

Spacing is what makes a layout look deliberate, and the easiest rule that works is the 8-point grid: every margin, padding and gap is 8, 16, 24, 32 — multiples of eight.

Create free account or sign in

Almost there

15 lessons left of 15

Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.