上下margin重叠传递问题

2020-06-26 20:14:22易采站长站整理

如果这里父元素里包含了多个块子元素,则每个子元素之间满足上下margin重叠,选择两者较大的margin作为两者之间的margin,第一个子元素的top和父元素重叠(左图上面白色距浏览器顶的白色区域即是),最后一个子元素的bottom和父元素重叠。IE6、7和标准浏览器显示效果均如左图。

此时,如果两个块元素是浮动元素,那么,那么就不存在子元素和父元素的margin传递情况,此时,上下的margin值则是两者之间的各自margin值相加!标准浏览器显示如下图中,IE6显示如下图右。但为什么显示有差异呢?

因为,额滴神啊!一波未平一波又起!块状元素和横向margin和浮动三者引发了IE6的新的兼容性问题——双边距bug(注意IE7没有双边距bug!!!!)

由此

实践时,首先一定要给父元素加触发haslyout的属性!这一条保证了在IE6、7下不出现margin传递问题和margin值消失问题;

然后,考虑在标准浏览器下,给子元素加浮动可以解决没有border时出现的margin传递问题,但是此时加浮动后会造成IE6的双边距bug,所以我们实践时尽量将浮动的块状元素的margin换为padding,如果实在不能换就给该元素加display:inline;!

3、两个Div(A、B)上下之间没有margin值,但是A中有子元素有margin,这时该子元素的margin值会传递到两者间,会使A、B两个元素之间填充上margin,仅限垂直方向!!!

对于这个问题,大概就是这样啦,其实也很简单,只是我把所有的情况列出来了,其实综合起来就是上面总结部分的内容。

我感觉这个margin传递和重叠都是因为两者的margin值之间没有边框或者是padding将margin这一空白区域隔开!!!!