第一种：两个块级元素的上下边距折叠
第二种：父元素和子元素（或者最后一个元素）的外边距
第三种：空的块级元素的上下外边距
折叠的根本原因：
margin之间直接接触，没有阻隔
折叠后外边距的计算：
1.如果两个外边距都是正值，折叠后的外边距取较大的一个
2.如果两个外边距一正一负，折叠后的边距为边距之和
3.如果两个外边距都为负数，折叠后边距为较小的边距
解决方案：解决方法实际上也就是阻止外边距直接接触
第一种、第三种：只有静态流的元素才会发生外边距合并故设置float position inline-block都可以
<style>.bother{ width: 50px; height: 50px; margin: 50px; background-color: #44cc00; <!--3.display: inline-block;--> } </style><body><div class="father"><div class="bother1 bother"></div><div class="bother2 bother"></div></div></body>第二种（嵌套的情况）只要border padding非0或者有inline元素隔开，比如在父元素里加一行文字也可以
<style> .margin-box{ width: 50px; height: 50px; margin: 50px; background-color: #fae900; } .father{ <!--3.overflow: hidden;--> background:#cccdd1; } </style></head><body><div class="father"> <!--4.<span>测试</span>--> <div class="margin-box"></div> <!--4.<span>测试</span>--></div></body>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
