使用margin定义块元素的垂直外边距时可能会出现外边距的合并
1、相邻块元素垂直外边距的合并
（1）、当上下相邻的两个元素相遇时，如果上面的元素有下外边距（margin-bottom）
（2）、当下面的元素有上外边距（margin-top）,则他们之间的垂直间距不是margin-bottom和margin-top之和
（3）、取两个值中较大者这种现象被称之为相邻块元素垂直外边距的合并（也称为外边距塌陷）
2、嵌套块元素垂直外边距的合并（塌陷）
（1）、对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
（2）、父元素的上外边距会与子元素的上外边距发生合并
（3）、合并后的外边距为两者中的较大者
解决方案：
（1）、可以为父元素定义上边框（border-top:1px solid transparent）
（2）、可以为父元素定义上内边距（padding-top:1px）
（3）、可以为父元素添加overflow:hidden;
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。