How to Find and Fix Weird Spacing Issues in WordPress with Chrome DevTools

July 10, 2026 | WordPress & AI Tips

You know the feeling. There's a gap on your WordPress site that's way too big — between paragraphs, around a sidebar, under a heading — and no setting in your theme seems to control it. You click everything in the editor, nothing changes, and half an hour later you're still staring at the same gap.

On a recent WP AI Success Hub live call, a member had exactly this problem: the "Read Next" sidebar on his Cadence blog had huge spacing between the linked posts — and he couldn't find where it was coming from. We fixed it live in a few minutes. Here's the method, so you can do it yourself.

Step 1: Right-click the problem element and choose Inspect

In Chrome (or any Chromium browser), go to the page with the problem, hover over the element with the bad spacing, right-click it, and choose Inspect. Chrome DevTools opens with that exact element highlighted in the HTML panel. This is the crucial shortcut — don't open DevTools first and go hunting; start from the element itself.

Step 2: Move up the tree until the highlight covers the gap

The element you clicked is often inside the thing causing the spacing. As you move your mouse up through the HTML tree, Chrome highlights each element on the page — including its margin and padding in orange and green. Keep stepping up until the highlighted box actually covers the gap you're trying to kill. In our live-call example, the culprit wasn't the link the member clicked — it was the list container a couple of levels up.

Nested HTML link, list item and unordered list boxes showing the list container as the source of a spacing issue

Step 3: Find the actual property in the Styles panel

With the right element selected, look at the Styles panel. Scroll through the rules and hover over each spacing property — Chrome shows you live which one is drawing that gap. In our case it was a row-gap: 2.5rem on the theme's post grid. Change the value right there in DevTools (it's temporary — just a preview) and watch the gap close. Now you know exactly what to override.

Step 4: Make the fix permanent — in the right place

Don't paste CSS into random places. For a small override like this, WordPress has a built-in home for it: Appearance → Customize → Additional CSS. CSS there survives theme updates, and you don't need a child theme for it. Copy the selector from DevTools, set your new value, and you're done:

.your-theme-post-grid {
  row-gap: 0.5rem;
}

The part most tutorials skip

The hard part isn't writing the CSS — it's finding which rule to override. That's a skill you build by watching someone trace it a few times. It's also exactly the kind of thing we do on the twice-weekly live calls inside the WP AI Success Hub: you share your screen, we find the culprit together, and you learn the method — not just the answer.

Stuck on something like this right now? Join the Hub and bring it to this week's call — $27/month, cancel anytime, replays included.

Get more of this on a live call