Singularity Singularity - 2 months ago 11
CSS Question

Why is this CSS layout causing the wrapper container to have a top margin

My question regards the code here:

The wrapper div is showing the yellow background (what appears to look like a margin) above the header div. I'm curious as to why this is happening.

I have tried setting the

for both. I've actually set it to
on every element in the code:
html, body, #header, #footer, etc

The yellow still shows.

However, when I apply zero margins and padding globally,

* { margin: 0; padding: 0; }

this can be prevented, and I can just add some small margins and padding on the wrapper container instead,

#wrapper { margin-top: 10px; margin-bottom: 10px; }

as such with this codepen:

My question is why is this happening, and how can I get the result of the second codepen without monkey-patching it.


It's the margin on your h2 elements.

h2 {
  margin: 0;

will fix it.