MDN说：
如果没有边框，填充，内嵌的内容，或者间隙来分隔
margin-top与块的margin-top第一个子块，或者没有边框，填充，联内容的高度，最小高度，或者最大高度来分隔margin-bottom的加上margin-bottom最后一个孩子的，那么这些边距就会崩溃。折叠的边距最终在父级之外。
我不明白最后一句话。为什么倒闭的保证金最终落在父母之外？如果最终在父母之外，它将去哪儿？我已经在网上搜索并阅读了一些有关边距折叠的教程，但是我什么都没找到。
我整理了这个小演示，以帮助演示其工作方式：
如您所见，我制作了三个元素，它们彼此嵌套。2个内部容器的上边距值均为20px，最外面的容器有上边界（被认为是边距分隔符的东西之一）。
由于两个子元素的顶部之间没有分隔，因此20px最外层的容器与两个子元素的BOTH之间只有空间...最里面的子元素的边距崩溃了。相反，仅由于该边界，最外面的容器内存在该边界。如果删除边界，则所有三个元素将共享相同的边界，该边界20px在所有三个容器之外。
考虑边距崩溃的最佳方法是这样的：在元素上要求边距将确保它的顶部具有那么多的边距，仅此而已（除非被迫拥有更多的边距）。因此，以我的示例为例，中间.parent元素20px上方是否有空间？是的，它确实。最里面的孩子上方.child有20px空间吗？是的，它也可以...因此，保证金规则已正确应用。只要空间在哪里，都没关系。
想象一下，.parent元素周围有一个边框，但是空白边沿仍然以没有边框的方式显示，然后问同样的问题。.parent元素是否有空格？是的，但是.child元素呢？不，它不再存在了，因为20px它与现在位于其上方的边界之间没有空间了。因此，实际上，空间不会崩溃，因此可以将这两个问题都回答为一个“是”。
我希望这会有所帮助。.它不是直接回答您的问题，而是提供更多有关其工作原理的理论，因此，可以说得更清楚些：
边距与填充不同，是要在元素外部添加空间。因此，边距将始终尽可能地折叠到最高父元素，以确保空间始终在“外部”。由于它位于元素外部，因此可以计入多个不同元素，因为它们都共享该“外部”空间。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句