Question

我的一位朋友对这个简单的html / css任务有疑问：http://jsfiddle.net/kaHzY/6/

问题在于.headline的{{1}}正在推倒margin-top，尽管它应该直接跟在#main div之间，而且之间没有任何空格。

添加nav div .inner padding解决了此问题。 1px仍有余量，但不再推迟.headline。

我知道这种行为，但我无法解释。你怎么解释这一点，特别是对那些正在学习CSS的人？为什么它会像那样？

由于

Answer 1

这是经典的折叠保证金行为。

编写CSS规范的人认为这是一个好主意，以防止边距创建过多的空白区域。如果没有这种行为，控制块元素之间的边距/空白将会有很多工作。

<强>参考文献：

为什么崩溃边缘是一个好主意

折叠边距是CSS Box模型的一个特性，它构成了可视化格式模型的基本工作单元，这使我们可以在合理的环境中开发网页。

在设计CSS规范时，作者必须平衡规则的编写方式，例如：margin: 1.0em，以及这些规则在需要布局内容块的CSS格式引擎中如何工作从下到上和从左到右（至少在西欧语言中）。

根据Eric Meyer上面引用的文章的思路，假设我们有一系列段落的边距根据：

p { margin: 1.00em; }

对于我们这些曾经看过段落之间有规则间距的打印页面的人来说，任何两个相邻段落之间的空间都是1.00em。人们还希望第一段在它之前有1.00em的余量，而最后一段在它之后有1.00em的余量。这是对p的简单CSS规则应如何表现的合理且可能简化的期望。

但是，对于构建解释简单p规则的CSS引擎的程序员来说，需要解决很多歧义。如果人们期望CSS规则的打印页面解释，那么这自然会导致collapsing margin行为。所以程序员提出了一个更复杂的规则，如：如果有两个相邻的p标签有顶部和底部边距，则将边距合并在一起。

现在这就引出了一个问题，你如何“将利润合并在一起”？相邻顶部和底部边距的最小值或最大值，两者的平均值是多少？第一要素的边际总是？如果你有除p以外的其他块元素怎么办？如果你添加边框或背景？下一步是什么？

最后，如何以这种方式计算所有这些边距设置，这样您就不必多次遍历整个HTML元素集（这会使复杂页面加载缓慢，特别是在早期的浏览器中）？

在我看来，崩溃的边缘提供了一个复杂问题的解决方案，平衡了编写边缘CSS规则的容易程度，用户对打印页面如何在我们的印刷遗产中进行布局的期望，最后提供了一个程序可以在浏览器存在的编程环境中实现。

Answer 2

我通过以下方式实现了您想要的布局：