我有一个简单的 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 margin 应该从 t-body DIV 的顶部开始计算。我也不明白为什么向 t-body DIV 添加填充可以解决问题。
谁能解释为什么 H1 边距似乎导致 t-head DIV 和 t-body DIV 之间存在差距的原因？ ...另外，为什么向 t-body DIV 添加填充可以解决问题？
最佳答案
原因是利润率下降。
看看这篇文章，尤其是“折叠父元素和子元素之间的边距”一章:http://reference.sitepoint.com/css/collapsingmargins你可能会看到。
您可以使用 overflow 与 visible 不同的值来取消折叠边距，例如溢出:隐藏或溢出:自动。
http://jsfiddle.net/5w4gp/
.t-body {
overflow: auto;
}
如果您不喜欢溢出技术，您可以添加
.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;
}
为什么这些有效？它们防止折叠的垂直边距相互“接触”。
关于css - DIV之间存在差距的原因是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22097875/