The 5 CSS spacing mistakes I find on almost every website

Most people can’t tell you why a website feels cheap. They just feel it. More often than not, the culprit isn’t color or typography — it’s spacing. Inconsistent margins, mismatched padding, rhythm that drifts as you scroll.

Here are the five spacing mistakes I find on almost every site, and how to spot them fast.

1. Sibling elements with different spacing

Three cards in a row. Two have margin-bottom: 24px, one has margin-bottom: 20px because someone tweaked it once and never came back. Individually invisible. Together, the grid feels subtly broken.

The fix is a spacing scale — a fixed set of values (4, 8, 16, 24, 32…) — and the discipline to never use a number that isn’t on it.

2. Magic numbers everywhere

margin-top: 13px. padding: 7px 19px. Where did these come from? Nobody knows. They’re the result of nudging things until they “looked right” in one specific viewport.

Magic numbers are how spacing systems die. Every one you add makes the next inconsistency easier to justify.

3. Vertical rhythm that drifts

Section one has padding: 80px 0. Section two has padding: 64px 0 because it “felt like too much”. Now the page breathes unevenly, and the eye notices even if the brain doesn’t.

Pick a section rhythm and hold it. Consistency reads as intentional; variation reads as careless.

4. Padding doing a margin’s job (and vice versa)

Using padding to push an element away from its neighbor, or margin to create internal breathing room, leads to spacing that collapses or doubles up in ways that are maddening to debug. Margin is space outside the box. Padding is space inside it. Keeping that straight prevents a whole category of bugs.

5. The collapsing-margin surprise

Two stacked elements, each with margin: 20px, and the gap between them is… 20px, not 40px. Margin collapsing is correct CSS behavior, but it surprises people constantly and makes spacing feel unpredictable.

How to actually catch these

Here’s the problem: you can’t see spacing. Margin and padding are invisible. You can stare at a layout for an hour and not notice that two cards are 4px off.

That’s why DevTools has a box-model inspector — and why PxGuard’s Inspect tool puts the same overlay right on the page. Hover any element and its margins, padding, and exact dimensions light up in a color-coded overlay. Inconsistencies that were invisible become obvious in a single pass.

Spacing is the cheapest way to make a site feel expensive. You just have to be able to see it.

Inspect your spacing for free →