添加额外元素时，标题和正文之间奇怪的额外间距
我有以下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、Chrome26和Firefox20都在顶部显示了不需要的额外空间，以及一个滚动条。
删除h2元素会导致此空间消失。
我的问题是，这是怎么回事？是否有HTML布局规则来解释添加空间的原因？
回答 3
Stack Overflow用户
发布于 2013-04-29 00:57:33
这是margin collapsing的一种奇怪的情况--两个块级元素的垂直边距在正常的流程中总是会崩溃。本例中的这两个元素是<body>和<h2>。如果您将<h2>从正常流(浮动，绝对位置)中移除，或者将其显示更改为inline-block，您将看到边距不会折叠，并且将被<body>“尊重”
http://jsfiddle.net/ZqeED/2/
从2.1 Spec
如果元素的边距与其父元素的上边距一起折叠，则框的上边框边缘将定义为与父元素的上边框边缘相同。
这就解释了为什么<h2>上的上边距添加了<body>上的间隙-如前所述，如果您要浮动、绝对定位或更改为display: inline-block;，则<h2>上边距边缘将与父级边框边缘相同，并且“间隙”将消失：
http://jsfiddle.net/ZqeED/4/
Stack Overflow用户
发布于 2013-04-29 00:57:18
这个问题被称为
要修复此问题，请添加：
h2
{
padding: 0;
margin: 0;
}然后问题就消失了。
另一种解决方案是将float: left或display: inline-block添加到h2
Working Fiddle
Stack Overflow用户
发布于 2013-04-29 01:12:23
这是因为您的<header>元素显示为浮动元素。默认情况下，块级元素水平扩展以填充整个父容器，并且延伸回任何浮动的内容后面。
块级<h2>元素实际上是从屏幕左上角的0,0点开始的，并从那里获得应用于它的默认边距-上边距，以向下推文本。然后，浮动的<header>元素从该页边距向下开始，与新的文本位置内联，如下所示：
解决这个问题的一个简单方法是使用填充而不是边距(如果您需要<h2>上方的空间，但不是所有的空间)。See a jsFiddle example.
https://stackoverflow.com/questions/16265294
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号