垂直方向间距计算
正值合并 --- 取最大值
li1 --- margin-top: 15px; margin-bottom: 15px;
li2 --- margin-top: 30px; margin-bottom: 10px;
li3 --- margin-top: 15px; margin-bottom: 15px;
block --- margin-top: 25px; margin-bottom: 25px;
li2与li1之间的距离是30px,因为li2的 margin-top > li1的margin-bottom
li2与li3之间的距离是15px,因为li3的 margin-top > li2的margin-bottom
ul与block之间的距离是25px,因为block的 margin-top > ul的margin-bottom
正负合并 --- 取相加后的值
li1 --- margin-bottom: -10px;
li2 --- margin-top: 30px; margin-bottom: 30px;
li3 --- margin-top: -30px;
li1与li2之间的距离 = -10 + 30 = 20
li2与li3之间的距离 = 30 + （-30） = 0
负值合并 --- 取绝对值大的那个
li1 --- margin-bottom: -10px;
li2 --- margin-top: -5px;
li1与li2之间的距离 = max([|-10|, |-5|]) = -10
不同的 BFC，垂直方向相接的 margin 不合并
div1 --- margin-bottom: 20px;
div2
div3 --- margin-top: 30px;
div3的父元素div2新建了一个 BFC，所以 div1 与 div3 之间的margin 没有合并