Singularity Singularity - 1 month ago 9
CSS Question

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

My question regards the code here: http://codepen.io/anon/pen/zoYmZz

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

margin
and
padding
to
0
for both. I've actually set it to
0
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: http://codepen.io/anon/pen/KNKGvz

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

Answer

It's the margin on your h2 elements.

h2 {
  margin: 0;
}

will fix it.