Strip away color, borders, and font weights, and a well-spaced layout still reads perfectly: this heading owns that paragraph, these cards form a group, that section is done and a new one has begun. Structure survives because spacing was carrying it all along. The Gestalt principle of proximity is the strongest grouping signal the eye has—stronger than boxes, stronger than color.

The ratio rule

Hierarchy through spacing is relative, not absolute. A heading should sit noticeably closer to its own paragraph than to the content above it—aim for at least double. When the gap above and below a heading is equal, it floats, orphaned, belonging to nothing.

/* Spacing pairs a heading to its content */
h2 {
  margin-top: 64px;   /* away from previous section */
  margin-bottom: 24px; /* close to what it owns */
}

Build every gap from a scale—4, 8, 12, 16, 24, 32, 48, 64—and spacing decisions become multiple-choice instead of essay questions. Consistency here is why polished products feel calm: equal things spaced equally, related things closer than unrelated things, everywhere.

“Cramped interfaces do not look busy. They look cheap — like a store that stacks stock to the ceiling.”

Space as confidence

There is also a rhetorical effect: generous whitespace around an element declares importance. Luxury brands set one product in an empty page; discount stores cram forty in a grid. Your pricing page, your hero, your key CTA—give them room and they gain weight without a single extra pixel of decoration.

Audit trick: blur your screenshot until text is unreadable. If you can still tell where every group starts and ends, spacing is doing its job. If it is one grey mass, no font weight will save you.