margin collapse 坍塌
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的一处即可。