相邻块级元素或父子元素的垂直外边距会合并（折叠）为单个边距，其大小为单个边距的最大值（或如果他们相等，则仅为其中的一个），这种行为称为边距折叠

<div style="margin-bottom: 20px;">A</div>
<div style="margin-top: 30px;">B</div>
// A和B的实际间距为30px

外边距合并的规则中有以下的例外情况：

边框：如果元素之间有边框，即使边框是透明的，外边距不会合并
内边距：如果元素之间有内边距，外边距也不会合并
BFC（块级格式化上下文）：如果元素创建了一个新的BFC，外边距也不会合并

相邻的兄弟元素的margin-top和margin-bottom的值发生重叠，且都为正值，会按照最大的边距值设置

解决方法：
（1）给后一个元素加上float
（2）给其中一个兄弟套上一个div，并设置border: 1px solid transparent;
父级和第一个 / 最后一个子元素的margin合并，且都为正值，会按照最大的边距值设置

解决方法：
（1）给父元素添加overflow: hidden（创建BFC）
这个方法只适用于子元素的高度 + 外边距高度＜父元素高度，否则子元素部分内容会被隐藏
（2）给父元素加边框（可以加个透明的）
（3）给父元素或者子元素设置display: inline-block
（4）给父元素或子元素设置float
（5）给父元素或子元素设置position: absolute
（6）给父元素添加padding
空的块级元素自身的margin-top和margin-bottom发生重叠

解决方法：
给自身设置border、padding或高度
高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠

解决方法：
（1）父元素设置border-bottom、padding-bottom来分隔他们
（2）父元素设置高度，max-height和min-height也可以解决