MDN说：
如果没有边框，填充，内联内容或清除将块的
margin-top与其第一个子块的margin-top分开，或者没有边框，填充，内联内容，高度， min-height 或 max-height ，用于将块的margin-bottom与最后一个孩子margin-bottom，然后这些边缘崩溃了。折叠的保证金最终在父母之外。
我不明白最后一句话。为什么折叠的保证金最终在父母之外？如果它最终在父母之外，它会去哪里？我在网上搜索并阅读了几个关于边缘折叠的教程，但我没有找到任何关于此的内容。
答案 0 :(得分：3)
我将这个小小的演示汇总在一起，以帮助演示其工作方式：
正如你所看到的，我已经制作了三个元素，它们全部嵌套在一起。 2个内部容器的上边距值均为20px，最外层容器的上边框（其中一个被视为边距分隔符）。
因为在两个子元素的顶部没有分离，所以在最外层容器和两个子元素之间只有20px个空间...最内层的孩子已经拥有它＃39;保证金崩溃。相反，只有因为边界而存在于最外层容器内的边距。如果删除边框，则所有三个元素将共享相同的20px边距，这将在所有三个容器之外。
考虑保证金崩溃的最佳方法是这样的：
要求元素上的余量将确保它在它的顶部具有那么多的余量，仅此而已（除非它被迫拥有更多）。所以看看我的例子，中间是否{ {1}}元素上面有.parent个空格？是的，它确实。最内层的孩子20px上面有.child个空间吗？是的，它也有...所以正确应用保证金规则。 只要它在那里，它并不重要。
想象一下20px元素周围有一个边框，但边距仍然以它没有的方式显示，然后问同样的问题。.parent元素是否有空格？是的，但是.parent元素呢？不，它不再会，因为它与现在位于其上方的边界之间不会有.child空间......所以，实际上，空间不会崩溃，所以这两者都是问题可以回答为“是”＆＃34;。
我希望这有助于...它对你的问题没有直接的答案，更多的是它背后的理论，所以更简单地说明事情：
与填充不同，边距意味着在元素之外添加空间。因此，只要有可能，保证金将始终折叠到最高的父元素，以确保空间始终在＆＃34;外部＆＃34;。因为它在元素之外，所以它可以计入多个不同的元素，因为它们都共享＆＃34;外部＆＃34;空间。