什么是外边距重叠

两个块级元素的上下外边距可能会合并成一个外边距，这就称之为外边距重叠。

计算外边距重叠方式：

如果两个都为整数，取最大值为最终的外边距值

<style>
  .box1 {
    width: 100px;
    height: 100px;
    background: skyblue;
    margin-bottom: 20px;
  }
  .box2 {
    width: 100px;
    height: 100px;
    background: purple;
    margin-top: 30px;
  }
</style>
<div class="box1"></div>
<div class="box2"></div>

.box1中的margin-bottom不会生效，只会生效.box2中的margin-top。

总结：不管两个值都是正数也好，一正一负也好，两个都是负数也好，只会生效两个值中绝对值更大的那个样式，绝对值较小的样式不会生效。

如何解决： 
————————————————
版权声明：本文为CSDN博主「a242424242424」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a242424242424/article/details/130159476