Question

我有一个简单的HTML页面，如下所示：

<html>
    <head>
        <style>
            BODY { margin:0px; padding:0px; background-color:#000000; color:#FFFFFF;}
            /*H1 { margin:0px; }*/
            .t-head { padding:10px; background-color:#0000FF; }
            .t-body { background-color:#FFFFFF; color:#000000; /*padding:10px;*/}
            .t-footer { padding:10px; background-color:#0000FF; color:#FFFFFF;}
        </style>
    </head>
    <body>
        <div class="t-head">Header content</div>
        <div class="t-body">
            <h1>Content Header</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="t-footer">Footer content</div>
    </body>
</html>

页面正文有三个部分 - 标题DIV（T-header），正文DIV（t-body）和页脚DIV（t-footer）。为了便于讨论，我将BODY的背景设计为黑色。如果您在浏览器中查看此页面，则在标题DIV和主体DIV之间存在间隙（即，黑色的水平带）。这种行为在IE，Chrome和Firefox中都是一致的。

我知道差距的罪魁祸首 - 这是H1标签的边缘。如果您从页面的样式部分取消注释H1样式，您将看到差距消失。或者，您可以将H1样式注释掉并取消注释t-body类中的填充样式，并且间隙将消失。我不明白的是为什么 H1边缘导致t-head DIV和t-body DIV之间的差距。我对CSS的理解（显然是不正确的）是H1边缘应该从t体DIV的顶部计算。我也不明白为什么在t-body DIV中添加填充可以解决问题。

任何人都可以解释为什么H1边缘似乎导致t头DIV和T体DIV之间的差距？ ...另外，为什么在t-body DIV中添加填充可以解决问题？

Answer 1

原因是利润率下降。

请看这篇文章，特别是“折叠父元素和子元素之间的边距”一章：http://reference.sitepoint.com/css/collapsingmargins，您可能会看到。

您可以使用overflow取消折扣边距，其值不同于visible，例如overflow: hidden或overflow:auto http://jsfiddle.net/5w4gp/

.t-body {
    overflow: auto;
}

如果您不喜欢overflow技术，可以添加

.t-body {
    padding-top: 1px;
    margin-top: -1px;
}

到.t-body。
http://jsfiddle.net/68785/

还有第三个使用float和clear的解决方案：http://jsfiddle.net/z2RNF/

.t-head {
    float: left;
    width: 100%;
}
.t-body {
    clear: both;
}

为什么这些有效？它们可以防止折叠的垂直边距相互“接触”。

以下是规范：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

这只是块元素的默认CSS框模型，子元素的边距会崩溃。

如果您想使用margin top来放置标题，则需要将.t-body元素设置为display: inline-block;属性。

正如您所见：http://jsfiddle.net/AvLTL/1/

此处有更多规格：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 3

将元素放置在div中的替代方法，其填充延伸超过div的边缘将是所述元素重叠到另一个div中，这将无助于“划分”两个div。解释器宁愿在两个div之间留出空间，而不是在div之间重叠内容。

所以，你的h1有足够的填充超过你的身体div的边缘。这导致了差距。当你增加body div的填充时，它给了它足够的空间来保持整个h1的内部。通过一次增加几个像素的填充来试验这一点。

（我会提供图片，但我在手机上：[）

DIV之间的差距是什么原因

3 个答案: