css - 有人可以解释这种 css margin 行为吗？

Question

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

问题是 .headline 的 margin-top 向下推 #main div 尽管它应该直接跟在 nav 之间没有任何空格。

添加 div .inner 和 1px 的 padding 解决了这个问题。 .headline 仍然有边距，但不再向下推 #main div。

我知道这种行为，但我无法解释。您如何解释这一点，尤其是对正在学习 css 的人？为什么会这样？

谢谢

Answer 1

这是典型的折叠边距行为。

编写 CSS 规范的人认为这是一个好主意，可以防止边距产生过多的空白。如果没有这种行为，控制 block 元素之间的边距/空白将需要做更多的工作。

引用资料:

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

安迪巴德文章 - http://andybudd.com/archives/2003/11/no_margin_for_error/

Eric Meyer 文章 - http://www.complexspiral.com/publications/uncollapsing-margins/

为什么折叠边距是个好主意

折叠边距是 CSS 盒模型的一个特性，它构成了视觉格式模型的基本工作单元，使我们能够拥有一个合理的网页开发环境。

在设计 CSS 规范时，作者必须平衡如何编写规则，例如:margin: 1.0em，以及这些规则如何在需要从上到下和从左到右的内容布局 block (至少在西欧语言中)。

按照上面引用的 Eric Meyer 文章的思路，假设我们有一系列的段落，其页边距根据以下样式设置:

p { margin: 1.00em; }

对于我们这些习惯于看到段落之间有规则间距的打印页面的人来说，人们会期望任何两个相邻段落之间的间距为 1.00em。人们还希望第一段之前有 1.00em 的边距，最后一段之后有 1.00em 的边距。这是对 p 的简单 CSS 规则应该如何表现的合理且可能简化的期望。

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

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

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

在我看来，折叠边距提供了一个复杂问题的解决方案，平衡了为边距编写 CSS 规则的难易程度、用户对打印页面在我们的打印传统中的布局方式的期望，最后提供了一个过程，可以在浏览器存在的编程环境中实现。