CSS之margin合并

一、背景

实际开发过程中，会遇到这样一种问题：上面一个div设置margin-bottom:10px，下面一个div设置margin-top:10px。最终效果是二者间距是10px，而不是预想中的20px。

这就是我们要讲的外边距合并(崩塌)，而且不止上面说的一种场景，这里将会详细讲解。

二、概念

块级元素的上外边距margin-top和下外边距margin-bottom有时会合并(或折叠)为一个外边距，其大小取其中的最大者

备注：浮动元素和绝对定位元素不会发生这种现象。

三、场景

代码参考地址前端技能

3.1、相邻元素

相邻的两个元素外边距会折叠(除非最后一个元素清除浮动)

eg：这里设置上下两个div的margin-top: 10px;margin-bottom: 10px;
运行效果如下图：

屏幕快照 2019-06-25 17.34.24.jpg

最后发现二者间距仍然是10px，margin塌陷。

解决办法：

• 因为margin取的是最大值，可以将其中一个数值加大，比如设置为20px。
• div可以采用padding，来达到间距效果，不用margin。

3.2、父子元素

如果父元素与第一个子元素之间不存在边框、内边距、行内内容、也没有创建块格式化上下文、也没有清除浮动，也就是二者之间只有margin-top。

如果父元素与最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height，也就是二者之间只有margin-bottom。

那么margin-top和margin-bottom就会产生折叠，此时子元素的外边距会溢出到父元素，直接体现就是父元素向下移动，父子之间间距不变。

eg：设置内部div的margin-top: 10px;演示效果发现，父元素向下移动一个10px距离；而子元素相对父元素位置没有发生改变。

运行效果图如下：

屏幕快照 2019-06-25 17.58.35.jpg

解决办法:

• 在父元素中设置空白border
• 在父元素中设置padding

3.3、空的块级元素

这个情况在实际场景中用的比较少，这里也要提一下。

如果一个块级元素中不包含任何内容、并且在margin-top和margin-bottom之间没有边框、内边距、行内内容、height、min-height，则上下边距margin-top和margin-bottom会折叠。

这里不再介绍例题

参考文章

Mastering margin collapsing