上下margin重叠传递问题

此时，如果两个块元素是浮动元素，那么，那么就不存在子元素和父元素的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这一空白区域隔开！！！！

以上就是上下margin重叠传递问题的详细内容，更多请关注 第一PHP社区 其它相关文章！