4

我有以下 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 布局规则？

4

3 回答 3

8

这是边距折叠的奇怪情况之一- 两个块级元素垂直边距在正常流程中总是会折叠。在这种情况下，这两个元素是 the<body>和 the <h2>。如果您<h2>从正常流中取出（浮动，绝对位置）或将其显示更改为，inline-block您会看到边距不会塌陷，并且会受到“尊重”<body>

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

从2.1 规范：

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

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

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

于 2013-04-28T16:57:33.053 回答
1

这个问题被称为折叠边距

要修复，请添加：

 h2
 {
     padding: 0;
     margin: 0;
 }

问题消失了。

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

工作小提琴

于 2013-04-28T16:57:18.410 回答
1

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

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

检查元素的尺寸

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

于 2013-04-28T17:12:23.410 回答