CSS之margin怪异现象

1.相邻块元素垂直外边距合并

当上下相邻的两个块级元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直距离并不是margin-bottom + margin-top之和，而是取两个值之间的较大值，这种现象就是’相邻块元素垂直外边距合并‘。

解决方案：尽量只给一个盒子设置margin值

2.嵌套块元素垂直外边距塌陷

对于嵌套(父子关系)的元素，父元素有上外边距，同事子元素也有上外边距，此时父元素塌陷较大的外边距值，即父元素的上外边距会取父子上外边距的较大值，子元素的上外边距会被忽略。

解决方案：为父元素设置上边框、父元素设置上内边距、父元素设置overflow:hidden、浮动、定位等都可以解决。