html - 父级和第一个/最后一个子级的边距折叠如何工作？

Question

MDN说:

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

我不明白最后一句话。为什么折叠的边距最终会出现 父级之外 ?如果它最终在父级之外，它会去哪里？我在网上搜索并阅读了一些关于边距折叠的教程，但我没有找到任何关于此的信息。

Answer 1

我把这个小演示放在一起来帮助演示它的工作方式:

http://jsfiddle.net/9pq8bm0o/

如您所见，我制作了三个元素，它们都相互嵌套。 2 个内部容器的上边距值为 20px ，最外面的容器有一个顶部边框(被认为是边距分隔符的东西之一)。

那么这是什么意思？

因为两个子元素顶部没有分隔，所以只有20px最外面的容器和两个子元素之间的空间......最里面的子元素的边距崩溃了。相反，最外层容器中存在的边距仅仅是因为该边框..如果删除边框，所有三个元素将共享相同的 20px margin 将在所有三个容器之外。

那么为什么会这样呢？

考虑边距崩溃的最佳方式是这样的:
要求元素上的边距将确保它在顶部有那么多边距，仅此而已(除非它被迫拥有更多)。所以看看我的例子，中间 .parent元素有20px上面的空间呢？是的，它确实。是不是最内在的 child .child有 20px上面的空间呢？是的，它也有...所以 margin 规则被正确应用。 那个空间在哪里并不重要，只要它在那里。

想象一下，.parent 周围有一个边界。元素，但边距仍然以没有的方式显示，然后问同样的问题..是否.parent元素有空间吗？是的，但是 .child元素？不，它不再会，因为不会有 20px它与现在位于其上方的边界之间的空间......因此，实际上，空间不会坍塌，因此这两个问题都可以回答为"is"。

我希望这会有所帮助......它不是对您问题的直接回答，而是更多关于它如何工作的理论，所以把事情说得更清楚一点:

tl;博士

与填充不同，边距旨在增加元素之外的空间。因此，只要有可能，边距将始终折叠到最高的父元素，以确保空间始终在“外部”。因为它在元素之外，所以它可以计入多个不同的元素，因为它们都共享“外部”空间。