CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。
对于上下两个并列的对象而言：上面div的margin-bottom和下面div的margin-top会塌陷所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。即div的高和他包含的元素有关。
当margin-bottom和margin都为正数时，结果为两者之间的最大值
当margin-bottom和margin-top都为负时，结果为两者绝对值较大的那个值。
当margin-bottom和margin-top为一正一负时，结果为两者之和。
对于父子关系的对象而言：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。
父元素无填充内容，且没有设置border时，子元素的margin-top不会起作用
解决父元素塌陷的方法有，（应该给父类元素添加BFC）
1、为父元素添加overflow:hidden;，
2、为父元素float非none属性，也可为子元素添加float非none属性
3、需要给父div设置：边框，当然可以设置边框为透明; border:1px solid transparent 或border-top:1px solid transparent
4、为父DIV添加padding，或者至少添加padding-top;
5，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。