Working Fiddle

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

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

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

来自2.1 Spec：

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

这解释了为什么<h2>上的上边距会增加<body>上的差距 - 如前所述，如果您要浮动，绝对定位或更改为display: inline-block; <h2> 1}} top margin edge 与父边缘相同，“gap”将消失：

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

Answer 2

此问题被称为 collapsing margins

要修复，请添加：

 h2
 {
     padding: 0;
     margin: 0;
 }

问题已经消失。

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

Working Fiddle

Answer 3

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

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

解决这个问题的一种简单方法是使用填充而不是边距（如果需要<h2>上方的空格，而不是高于一切的空间）。 See a jsFiddle example.

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

3 个答案:

Working Fiddle