我有一个简单的 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-body DIV 的顶部开始计算。我也不明白为什么向 t-body DIV 添加填充可以解决这个问题。
谁能解释为什么 H1 边距似乎导致 t-head DIV 和 t-body DIV 之间的差距？...另外，为什么向 t-body DIV 添加填充可以解决问题？
原因是利润率下降。
看看这篇文章，尤其是“折叠父元素和子元素之间的边距”一章：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