Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

Thin Black Lines Between Sections That Should Sit Flush

Field Note #134
🔬 Generalized 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
You’ve got two sections stacked on a page — say a light band followed by a dark one — and they’re supposed to touch with no gap. Instead there’s a thin sliver of black running along the seam between them, like a hairline crack in the page.
This one has two different possible causes that look identical, which makes it a little sneaky to debug.

What’s actually happening
Cause 1 — a literal leftover margin. Somewhere in your CSS, one of the two sections has an actual margin-top or margin-bottom value sitting on it — often left over from an earlier design pass where that spacing made sense in isolation, before the sections were placed directly next to each other. That margin is empty space outside the section’s own background, so whatever’s behind the page (often a dark theme body background) shows through in that gap.

Cause 2 — margin collapse. Even if you didn’t set a margin on the section itself, a heading or paragraph inside it might have its own default margin. If the section wrapping it has no padding, border, or defined layout context to contain that margin, the browser lets it “escape” upward or downward through the wrapper — shrinking the wrapper’s visible background box and exposing whatever’s behind it, right at that edge.

How to tell the difference
Inspect the seam itself in dev tools. If you can click directly on a section element and see a non-zero margin value in the Box Model diagram at the bottom of the Styles panel, that’s Cause 1 — an actual margin. If the section’s own margin reads as zero but the gap is still there, suspect Cause 2 — check the first or last child element inside it (often a heading) for a default margin the browser is applying.

The fix
For a literal margin: don’t just delete it — convert that spacing into padding on the section instead, so the same visual breathing room exists inside the section’s own colored box rather than as empty space outside it.

For margin collapse: add display: flow-root; to the section wrapper. This forces the browser to treat it as a new layout context, which contains any child’s margin instead of letting it leak through.

How to avoid it next time
Whenever two full-width sections with different background colors need to sit flush against each other, add display: flow-root to both as a matter of course — it’s a no-downside defensive habit that heads off Cause 2 before it ever shows up, and makes Cause 1 (an actual leftover margin) the only thing left to check for.

Tagged in :

More from the field