13518219792
小编给大家分享一下margin重叠怎么办，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
把这部分总结到这里啦~
下面的几个部分应该是margin重叠问题的所有情况了：
1、两个普通元素上下的margin会合并为一个margin，哪个大选哪个！
两个浮动元素不会出现margin传递的问题，依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值。
2、两个元素如果是包含关系，父元素和子元素上下margin值也会合并
当父元素不加边框，不设置宽高，即父级没有触发haslayout时 | IE6、7和标准浏览器下，均会发生margin传递问题子元素和父元素的高度相同（子元素的top将和父元素的top在一条直线上，bottom将和父元素的bottom在一条直线上）而父元素则选择两者之间大的数值作为父元素的margin-top值和margin-bottom值！！！ 子元素的margin-left和margin-right值依然存在 |
| 当父元素不加边框，但是，设置宽或高或zoom：1；即父级加可以触发haslayout的属性时 | 标准浏览器下，会发生margin传递但是在IE6、7下则不会发生margin传递（即子元素的margin就是相对于父元素的，不会传递给父级） |
| 当父级加边框，并且父级没有触发haslayout时 | 标准浏览器下，不会发生margin传递IE6、7下，子元素的margin彻底消失！ |
| 当父级加边框，并且父级触发haslayout（即加width或height或zoom：1）时， | IE6、7和标准浏览器下，都不会发生margin传递！！！ |
对于IE6、7来说：
即只要触发haslayout，不管给不给父元素加边框，不管标准浏览器会不会发生margin传递，IE6、7下都不会发生margin传递！！！
而对于标准浏览器来说：
只有加边框才能避免margin传递！！！
给父元素添加边框，则子元素和父元素之间的margin就有分割线了，此时将不会发生合并现象了！如果给子元素添加边框两者的margin值还是没有被分开，所以依然还会发生重叠现象！
如果这里父元素里包含了多个块子元素，则每个子元素之间满足上下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这一空白区域隔开！！！！
以上是margin重叠怎么办的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
