Normalize.css top header gap

Question

I'm starting a new project and i wanna use normalize.css but i'm facing one little problem with. In the top of the DOM you'll find a yellow gap, body background-color. The main container is green colored and contains exactly the html from normalize.css demo.

You'll find a demo right here: http://goo.gl/hf8cv

Answer 1

What you see is margin collapsing.

When an element with a margin is inside an element without border or padding, the margin collapses with the margin of the parent element.

It's the margin of the h1 element that you see at the top. As none of the parents have border or padding, the margin collapses all the way out to the outermost container.