css - white strip at top of HTML page, despite all margins, paddings, etc. set to 0

问题描述:

I have a white (actually, body color, ghostwhite) strip at the top of my HTML page, even though all margins, paddings, etc. etc. are set to 0.

URL: (edit: removed, because it's outdated)

I've thoroughly investigated everything I could think of, and I'm officially out of ideas what's causing this. The really strange thing is that I've copied the CSS from a test page and it works properly there, so I suspect any of boilerplate, modernizr, etc. that I use on the live page, but I've checked everything I could think of there and couldn't find a reason.

Firebug shows me that apparently the entire body is offset by exactly 2em. If I add a "top: -2em" to the CSS, it aligns perfectly with the top of the page. But that's at best a workaround and I'd like to understand what's going on here.

网友答案:

The issue is with the #logo DIV and the H1 element. Both have margins which (cumulatively) produce this white strip.

Remove the margin from the #logo element, and use padding for the H1.

Update:

Another way would be to:

remove margin from #logo

add padding to #logo

set margin:0 on H1

remove line-height:0.5em from #logo

Result:

Btw I recommend you to include YUI CSS Reset (or some other reset sheet) to your page.