父母和第一个/最后一个孩子的边际崩溃是如何工作的？

Question

MDN说：

如果没有边框、填充、内联内容或清除来将块的margin-top与其第一个子块的margin-top分隔，或者没有边界、填充、内联内容、高度、最小高度或最大高度来将块的margin-bottom与其上一个子块的margin-bottom分隔，那么这些边距就会崩溃。崩溃的边距在父级之外结束。

我不明白最后一句。为什么崩溃的边距在父之外以结束？如果它在父母之外结束，它会去哪里？我在网上搜索过，读过几本关于边缘塌陷的教程，但是我没有找到任何关于这方面的东西。

Answer 1

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

http://jsfiddle.net/9pq8bm0o/

正如您所看到的，我已经创建了三个元素，它们都相互嵌套在一起。两个内部容器都有一个20px的最高边距值，而最外层的容器有一个顶边框(被认为是边距分隔符的事情之一)。

那这是什么意思？

因为两个子元素的顶部没有分离，所以在最外层的容器和两个子元素之间只有空间的20px .内心深处的孩子已经崩溃了。相反，存在于最外层容器中的保证金仅仅是因为该边界..。如果移除边框，所有三个元素都将共享位于所有三个容器之外的同一20px边距。

那为什么是这样？

考虑保证金崩溃的最佳方式是这样:要求一个元素的保证金将确保它在顶部有那么多的空间，而没有更多的(除非它被迫拥有更多)。因此，看看我的例子，中间的.parent元素是否在其上方有空间的20px？是的，确实如此。最里面的孩子.child上面有空间的20px吗？是的，它也是.因此，保证金规则的应用是正确的。--只要它在那里，空间在哪里都不重要。--

假设在.parent元素周围有一个边框，但是边距仍然以它不存在的方式显示，然后问同样的问题。.parent元素有空格吗？是的，但是.child元素有吗？不，它不再是这样，因为在它和现在位于它上面的边界之间不会有空间的20px .因此，在现实中，空间并没有崩溃，所以这两个问题都可以被回答为“是”。

我希望这有帮助..。这并不是对你的问题的直接回答，而是更多地解释了它是如何工作的，所以说得更清楚一点：

tl;dr

与填充不同，边距是指在元素之外添加空间。因此，在可能的情况下，边距总是缩到最高的父元素，以确保空间总是“外部的”。因为它在元素之外，所以它可以计算出多个不同的元素，因为它们都共享“外部”空间。