详解CSS外边距折叠引发的问题

时间：2021-05-08

第一种：两个块级元素的上下边距折叠

第二种：父元素和子元素（或者最后一个元素）的外边距

第三种：空的块级元素的上下外边距

折叠的根本原因：

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章