css块级元素的外边距重叠问题

文章目录

• 什么是外边距
• 为什么会发生上下外边距重叠问题
• 怎么解决上下外边距重叠问题

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是外边距

 外边距(margin)是指元素与元素之间的距离。

属性：

margin-top:设置元素上外边距

margin-right:设置元素右外边距

margin-bottom:设置元素下外边距

margin-left:设置元素左外边距

二、为什么会发生上下外边距重叠问题

HTML如下（示例）：

<div id="box1">div1</div>
<div id="box2">div2</div>

CSS如下（示例）：

#box1{
background-color:aqua;
margin-bottom:20px;
}#box2{
background-color:blueviolet;
margin-top:20px
}

按理来说我们两个盒子的外边距它俩的上下距离应该是40px

那我们来看看页面

 

 问题来了，两个盒子之间的外边距距离并没有相加反而是重叠了。

这是为什么呢

当两个相邻的div元素上下存在外边距时，它们的外边距会发生重叠。这种情况下，两个div元素的外边距将会合并成一个外边距，取其中较大的那个值作为最终的外边距。

三、怎么解决上下外边距重叠问题

1、使用内边距（padding）替代外边距。
2、将元素转为行级元素或者行块级元素
3、给其后的元素设置float浮动

---

        如有纰漏欢迎补充--前端甄子丹