添加额外元素时，标题和正文之间的额外间距奇怪

Question

我有以下HTML

<body>
    <header></header>
    <h2>Title</h2>
</body>

使用以下CSS

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

header {
    float: left;
    background: black;
    height: 100%;
    width: 150px;
}

http://jsfiddle.net/ZqeED/1/

IE10，Chrome 26和Firefox 20都在顶部显示了不必要的额外空间，以及滚动条。

删除h2元素会导致此空间消失。

我的问题是，发生了什么？ 是否有HTML布局规则解释了为什么要添加空间？

Answer 1

这是边缘崩溃的一个奇怪的例子 - 两个块级元素垂直边缘将始终在正常流程中崩溃。 在这种情况下，这两个元素是<body>和<h2> 。 如果你将<h2>从正常流量中取出（浮动，绝对位置）或将其显示更改为inline-block您将看到边距不会崩溃并且将被<body> “尊重”

http://jsfiddle.net/ZqeED/2/

从2.1规格：

“如果元素的边距与其父元素的上边距折叠，则框的上边框边缘定义为与父元素相同。”

这解释了为什么<h2>上的上边距正在增加<body>上的间隙 - 如前所述，如果您要浮动，绝对定位或更改为display: inline-block; <h2>上边距边缘与父边框边缘相同，“间隙”将消失：

http://jsfiddle.net/ZqeED/4/

Answer 2

此问题被称为折叠边距

要修复，请添加：

 h2
 {
     padding: 0;
     margin: 0;
 }

而问题已经消失。

另一个解决方案是将float: left 或 display: inline-block到h2

工作小提琴

Answer 3

这是由您的<header>元素显示为浮动元素引起的。 默认情况下，块级元素水平扩展以填充整个父容器，并且还延伸回任何浮动内容 。

您的块级<h2>元素实际上在屏幕左上角的0,0点处开始清除，并从那里获得其默认的margin-top以将文本向下推。 然后，您的浮动 <header>元素从该边距开始向下与新文本位置内联，如下所示：

解决这个问题的一个简单方法是使用填充而不是边距（如果您需要<h2>上方的空格但不高于所有内容）。 请参阅jsFiddle示例。

添加额外元素时，标题和正文之间的额外间距奇怪

问题描述

3 个解决方案

解决方案1
7 已采纳 2013-04-28 16:57:33

解决方案2
1 2013-04-28 16:57:18

工作小提琴

解决方案3
1 2013-04-28 17:12:23

添加额外元素时，标题和正文之间的额外间距奇怪

问题描述

3 个解决方案

解决方案1 7 已采纳 2013-04-28 16:57:33

解决方案2 1 2013-04-28 16:57:18

工作小提琴

解决方案3 1 2013-04-28 17:12:23

解决方案1
7 已采纳 2013-04-28 16:57:33

解决方案2
1 2013-04-28 16:57:18

解决方案3
1 2013-04-28 17:12:23