有人能解释一下CSS margin的行为吗？

Question

4

我的一个朋友在完成这个简单的html/css任务时遇到了问题：http://jsfiddle.net/kaHzY/6/ 问题是，尽管应该直接跟随导航（nav）而没有任何间隔，但.headline 的margin-top仍然将#main div向下推。

添加具有1px填充的div .inner解决了此问题。 .headline仍然具有边距，但不再将#main div向下推。

我知道这种行为，但无法解释它。你如何解释这个问题，特别是对于正在学习css的人来说？它为什么会这样表现？

谢谢。

- Alex

你是在寻找替代方案还是只是想要解释...我正在努力想出一个简单的解释，为什么这是做事情的好方法... - Marc Audet

如上所述，我需要能够解释这个。谢谢。 - Alex

解释者对CSS/HTML的熟练程度如何？ - Marc Audet

1

有很多关于如何处理折叠边距的文章，但没有人谈论为什么它被设计成这样...现在你让我想知道了！ - Marc Audet

我知道，这不是我的标记。无论如何都没关系，重要的是边距。 - Alex

显示剩余2条评论

2个回答

-1

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

- BJack

1.) 链接在哪里？ 2.) 那根本不是我的问题。 - Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Audet · Accepted Answer

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

编写CSS规范的人认为这是一个不错的主意，可以防止边距产生过多的空白。如果没有这种行为，控制块元素之间的边距/空白将需要更多的工作量。 参考资料： CSS2规范 - http://www.w3.org/TR/CSS2/box.html#collapsing-margins Andy Budd文章 - http://andybudd.com/archives/2003/11/no_margin_for_error/ Eric Meyer文章 - http://www.complexspiral.com/publications/uncollapsing-margins/

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

折叠边距是CSS Box Model的一项功能，它形成了视觉格式模型的基本工作单元，使我们可以在其中开发Web页面的有理环境。

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

按照Eric Meyer上面引用文章的思路，假设我们有一系列按以下方式设计边距的段落：

p { margin: 1.00em; }

对于我们习惯于看到间距规则的页面的人来说，预期任何相邻两个段落之间的间距为1.00em。同时，预期第一个段落在其前面有1.00em的边距，最后一个段落在其后面有1.00em的边距。这是一个合理而简化的对p的CSS规则应如何行动的预期。

然而，对于构建解释简单的p规则的CSS引擎的程序员们来说，有很多需要解决的模糊问题。如果人们期望CSS规则的打印页面解释，则自然会导致“折叠间距”行为。因此，程序员提出了一条更加复杂的规则：如果有两个带有顶部和底部边距的相邻p标签，请将边距合并在一起。

现在这就引出了一个问题，如何将边距"合并在一起"?相邻顶部和底部边距的最小值或最大值?两者的平均值？总是第一个元素的边距？如果你有其他块级元素而不是p，如果你添加了边框或背景呢？

最后，如何计算所有这些边距设置，以使您不必多次迭代整个HTML元素集（这将使复杂的页面在早期浏览器中加载缓慢）？

在我看来，“折叠间距”为一个复杂的问题提供了一个解决方案，平衡了编写边距CSS规则的易用性、用户对我们印刷遗产中页面布局的期望，最后提供了一种能够在浏览器存在的编程环境中实现的过程。