【CSS】什么是外边距的重叠？常见的有哪几种重叠情况？
1、前言
大家好，我是翼同学。今天笔记的内容是：
外边距重叠
2、什么是外边距重叠？
外边距重叠，又称外边距合并，指的是如果两个盒子都设置了外边距，此时在垂直方向上外边距有时会重叠、合并为一个外边距，其大小是单个外边距的最大值，如果两个外边距相等，则取其中一个。这种现象叫做外边距重叠。
3、外边距重叠有几种情况？
一、相邻同级元素
当我们使用 margin 属性定义盒子元素的垂直外边距时，可能会出现外边距的合并。
也就是当上下两个块级兄弟元素相邻时，如果上边元素设置了下外边距 margin-bottom，并且下元素也设置了上外边距 margin-top，此时它们之间的垂直距离并不是 margin-bottom 与 margin-top 之和，而是取这两个属性值的最大者。这种现象就是相邻块元素垂直外边距的重叠（合并）。
我画个示意图，如下所示：
举个例子：
在上述这个例子中，垂直方向上的两个<p>元素的外边距并不会合并为 100px，而是会发生外边距重叠，使得实际外边距为 80px（选择较大的外边距）
二、嵌套父级元素
当父元素与后代元素之间没有内容时，父级元素和子元素的外边距会发生重叠（塌陷）。
这种重叠可以分为两种情况：
(1)、如果没有行内内容、边框（border）、内边距（padding）、也没有创建 BFC 或者清除浮动来分开块级父元素的上边距（margin-top）与其子元素的上边距（margin-top），此时就会发生外边距塌陷。
举个例子，画个示意图：
(2)、同样的，如果没有行内内容、边框、内边距、高度、等来分开块级元素的下边距（margin-bottom）与其子元素的下边距（margin-bottom），此时也会发生外边距塌陷，重叠部分最终会溢出到父级快元素外面。
三、空的块级元素
当一个块级元素的上外边距 margin-top 贴到另一个元素的下外边距 margin-bottom，并且该块级元素是空的，也就是没有设置边框 border、没有内边距 padding、没有高度 height、没有最大高度或最小高度、内容设定为 inline 或者清除浮动 clear-fix，那么此时也会发生外边距重叠情况。
4、注意事项
设定为浮动或者绝对定位的盒子是不会出现外边距的重叠问题；
就算父元素的外边距是 0，第一个或最后一个子元素的外边距仍然会溢出到父元素的外面；
如果参与重叠的外边距中包含负值，重叠后外边距的值是最大的正边距与绝对值最大的负边距的和；
如果所有参与重叠的外边距都为负值，则重叠后外边距的值为最小负边距的值。
5、写在最后
好了，今天的笔记就记到这里。
版权声明: 本文为 InfoQ 作者【翼同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/8c661498f49fe8e5e9dec5892】。文章转载请联系作者。
知行合一 2022.08.02 加入
@珠海科技学院
评论