Strange extra spacing between header and body when extra element is added
Question
I have the following HTML
<body>
<header></header>
<h2>Title</h2>
</body>
With the following CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
header {
float: left;
background: black;
height: 100%;
width: 150px;
}
IE10, Chrome 26, and Firefox 20 all show unwanted extra space at the top, as well as a scroll bar.
Removing the h2 element causes this space to disappear.
My question is, what is going on? Is there an HTML layout rule which explains why the space is being added?
3 answers
solution1
7 ACCPTED 2013-04-28 16:57:33
Thats one of the stranger cases of margin collapsing - two block-level elements vertical margins will always collapse in the normal flow. Those two elements in this case are the <body> and the <h2> . If you take the <h2> out of the normal flow (float, absolutely position) or change its display to inline-block you'll see that the margins will not collapse and will be "respected" by the <body>
From the 2.1 Spec :
"If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's."
This explains why the top margin on the <h2> is adding the gap on the <body> - as said before if you were to float, absolutely position or change to display: inline-block; the <h2> top margin edge will be the same as the parents border edge and the "gap" would disappear:
solution2
1 2013-04-28 16:57:18
This issue is reffered to as collapsing margins
To fix, add:
h2
{
padding: 0;
margin: 0;
}
And the problem is gone.
Another solution would be to add float: left or display: inline-block to the h2
Working Fiddle
solution3
1 2013-04-28 17:12:23
This is caused by your <header> element being displayed as a floated element. By default, a block-level element expands horizontally to fill the entire parent container, and also extends back behind any floated content .
Your block-level <h2> element actually starts clear at the 0,0 point in the top left of the screen and from there gets its default margin-top applied to it to push the text down. Your floated <header> element then starts down from that margin to be inline with the new text position, as seen below:
An easy way to get around this is to use padding instead of margins (if you need the space above the <h2> but not above everything). See a jsFiddle example.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.