CSS外边距合并的情况主要分两种：
1.相邻兄弟元素之间的外边距合并
当相邻的兄弟元素，前一个设定了 margin-bottom 后一个设定了 margin-top，那么这两个外边距会合并成其中一个比较大的值。
解决方法：
1.给其中一个兄弟设置 display:inline-block width:100% (width:100% 目的是为了不让两个兄弟元素出现在同一行。)
2.根据实际需求重新设置margin
2.父级元素和第一个元素以及最后一个元素的合并（塌陷）
当父级元素没有设置padding、border的时候，他的margin-top、margin-bottom会和他的第一个子元素和最后一个子元素合并（左右外边距不会合并）。
正常预想的情况（父级元素设置了border）
合并的情况（父级元素没有设置padding、border），第一个子元素的margin-top 和 最后一个子元素的margin-bottom被合并了。
解决方法：
1.父元素添加样式：overflow:hidden
