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

Question

MDN说：

如果没有边框，填充，内嵌的内容，或者间隙来分隔margin-top与块的margin-top第一个子块，或者没有边框，填充，联内容的高度，最小高度，或者最大高度来分隔margin-bottom的一个带有margin-bottom最后一个子节点的块，然后这些边距会崩溃。折叠的边距最终位于父级之外。

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

Answer 1

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

http://jsfiddle.net/9pq8bm0o/

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

那么这是什么意思？

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

那么为什么会这样呢？

考虑边距折叠的最佳方法是这样的：要求元素的边距将确保它在顶部有那么多边距，仅此而已（除非它被迫拥有更多）。所以看看我的例子，中间.parent元素20px上方是否有空间？是的，它确实。最里面的孩子上面.child有20px空间吗？是的，它也有...所以保证金规则被正确应用。那个空间在哪里并不重要，只要它在那里。

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

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

tl;博士

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