MDN says:
如果没有边框、内边距、内联内容或清除来分离margin-top
一个块的margin-top
它的第一个子块,或者没有边框、填充、内联内容,height, 最小高度, or 最大高度来分离margin-bottom
一个块的margin-bottom
的最后一个孩子,那么这些边缘就会崩溃。折叠的边距最终位于父级之外。
我不明白最后一句话。为什么折叠的边距最终会出现在父级之外?如果它最终在父级之外,它会去哪里?我在网上搜索并阅读了一些关于边距折叠的教程,但我没有找到任何与此相关的内容。
我整理了这个小演示来帮助演示其工作方式:
http://jsfiddle.net/9pq8bm0o/
正如您所看到的,我创建了三个元素,所有元素都相互嵌套。 2 个内部容器的顶部边距值为20px
,最外面的容器有一个顶部边框(被认为是边距分隔符的东西之一)。
那么这是什么意思?
因为两个子元素的顶部没有分隔,所以只有20px
最外面的容器和两个子元素之间的空间...最里面的子元素的边距塌陷。相反,最外层容器中存在的边距仅仅是因为该边框。如果删除边框,所有三个元素将共享相同的边距20px
保证金将位于所有三个容器之外。
那么为什么会这样呢?
考虑边距折叠的最佳方式是这样的:
要求一个元素有一个边距将确保它在顶部有那么多边距,仅此而已(除非它被迫有更多)。所以看看我的例子,中间是否有.parent
元素有20px
上面的空间?是的,它确实。最内心的孩子是否.child
have 20px
上面的空间?是的,它也确实如此......所以保证金规则被正确应用。该空间位于何处并不重要,只要它在那里即可。
想象一下,周围有一个边界.parent
元素,但边距仍然按原来的方式显示,然后问同样的问题...parent
元素有空间吗?是的,但是.child
元素?不,不再会了,因为不会有20px
它和现在位于其上方的边界之间的空间......因此,实际上,该空间不会塌陷,因此这两个问题都可以回答“是”。
我希望这会有所帮助..这不是对你的问题的直接回答,而是更多的是它如何工作背后的理论,所以更简单地说:
tl;dr
与填充不同,边距旨在添加元素外部的空间。因此,只要有可能,边距总是会折叠到最高的父元素,以确保空间始终在“外部”。因为它位于元素外部,所以它可以计入多个不同的元素,因为它们都共享“外部”空间。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)