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会折叠。
这里不再介绍例题
