两个块级元素的上下外边距可能会合并成一个外边距,这就称之为外边距重叠。
计算外边距重叠方式:
如果两个都为整数,取最大值为最终的外边距值
<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