1.margin同向重叠。
问题描述:
first盒子和wrapper大盒子的margin都是10px,然而,first的上边界与wrapper的上边界重叠,third的下边界与wrapper下边界重叠,而不是相距10px。
解决方法:
a.给wrapper设置border。
b.给wrapper设置padding。
c.引用闭合浮动的方式,在父元素wrapper中设置overflow:hidden(针对IE还需要加上zoom:1).
d.给wrapper设置position:absolute。
e.给内层div们设置float属性(记得最后闭合浮动或者清除浮动)。
2.margin异向重叠
问题描述:依旧如上图,first和second盒子都有margin:10px,但是显示出来两个盒子的距离却不是20px,而仍然是10px。也就是说此时上面盒子的margin-bottom和下面盒子的margin-top产生了重叠,这个距离由二者中数值较大者决定。
我认为异向重叠是一个优点,一般情况下,我并不想去改变它。等遇到需要解决的时候再来补充吧。