Member Avatar for sun-tzu

Ok, I have been dealing with this problem for a while now and I need it fixed. I am starting to design a site at and under the footer at the very bottom of the page there is a 10px white space. I can't figure out what's up.

  • 2 Contributors
  • 4 Replies
  • 123 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by sun-tzu

Dani AI

Generated

Quick note: reported a ~10px white gap beneath the footer and ’s spacing tweak fixed it quickly. That’s a fine quick patch, but a few common layout causes deserve a look so the site remains robust across browsers and viewports.

Common checks and quick fixes (use DevTools > Computed to see which rule contributes the gap):

  • Browser default margins: several browsers add default body margins. Reset them first:
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
  • Collapsing margins on the last child of the content area can push space outside the container. Remove bottom margin on the last element before the footer:
.content > *:last-child {
  margin-bottom: 0;
}
  • Inline elements (images, svgs) inside the footer can create a baseline gap. Make them block-level or adjust vertical alignment:
footer img,
footer svg {
  display: block;
}
  • Positioned footers: if the footer is absolute/fixed, ensure no offsets are accidentally set and use bottom: 0; left: 0; width: 100%.

A more robust layout (prevents gaps when content is short) is a simple flexbox "sticky footer":

html, body { height: 100%; margin: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; }

If the quick padding fix is kept, treat it as a bandaid and still run the checks above. Inspect for pseudo-elements (::before/::after) or stray empty elements after the footer — those are often overlooked. For reference, MDN pages on CSS margin and Flexbox explain these behaviors in detail: margin on MDN and Flexbox basics on MDN.

Recommended Answers

All 4 Replies

Member Avatar for teedoff

I think if you add a bit of padding-bottom to your footer div, say 20px, that will resolve it.

Edited by teedoff because: n/a
Member Avatar for sun-tzu

Thanks! I new it was probably a simple solution. Makes me look like a n00b lol

Member Avatar for teedoff

naaa...well that was just the quickest solution I had. You might want to still check your page on different screen resolutions.

Edited by teedoff because: n/a
Member Avatar for sun-tzu

Haha, yeah. Well thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.