添加额外元素时，标题和正文之间的额外间距奇怪
[英]Strange extra spacing between header and body when extra element is added
问题描述
I have the following HTML 
我有以下HTML
<body>
<header></header>
<h2>Title</h2>
</body>
With the following CSS 使用以下CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
header {
float: left;
background: black;
height: 100%;
width: 150px;
}
http://jsfiddle.net/ZqeED/1/ http://jsfiddle.net/ZqeED/1/
IE10, Chrome 26, and Firefox 20 all show unwanted extra space at the top, as well as a scroll bar. IE10，Chrome 26和Firefox 20都在顶部显示了不必要的额外空间，以及滚动条。
Removing the h2 element causes this space to disappear. 删除h2元素会导致此空间消失。
My question is, what is going on? 我的问题是，发生了什么？ Is there an HTML layout rule which explains why the space is being added? 是否有HTML布局规则解释了为什么要添加空间？
3 个解决方案
解决方案1
7 已采纳 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> . 在这种情况下，这两个元素是<body>和<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> 如果你将<h2>从正常流量中取出（浮动，绝对位置）或将其显示更改为inline-block您将看到边距不会崩溃并且将被<body> “尊重”
http://jsfiddle.net/ZqeED/2/ http://jsfiddle.net/ZqeED/2/
"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; 这解释了为什么<h2>上的上边距正在增加<body>上的间隙 - 如前所述，如果您要浮动，绝对定位或更改为display: inline-block; the <h2> top margin edge will be the same as the parents border edge and the "gap" would disappear: <h2>上边距边缘与父边框边缘相同，“间隙”将消失：
解决方案2
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 另一个解决方案是将float: left 或 display: inline-block到h2
Working Fiddle 工作小提琴
解决方案3
1 2013-04-28 17:12:23
This is caused by your <header> element being displayed as a floated element. 这是由您的<header>元素显示为浮动元素引起的。 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. 您的块级<h2>元素实际上在屏幕左上角的0,0点处开始清除，并从那里获得其默认的margin-top以将文本向下推。 Your floated <header> element then starts down from that margin to be inline with the new text position, as seen below: 然后，您的浮动 <header>元素从该边距开始向下与新文本位置内联，如下所示：
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). 解决这个问题的一个简单方法是使用填充而不是边距（如果您需要<h2>上方的空格但不高于所有内容）。 See a jsFiddle example. 请参阅jsFiddle示例。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.