html，margin重叠有什么方法可避免

来源：互联网 2023-03-16 19:15:47 74

当我们在做html页面时，如果有二个元素都有设置了margin边距，他们是会重叠的，如果你不希望重叠，该怎么避免呢？我们来看一下。

方法/步骤

在html里，我们先创建二个div，有各自的样式名。

html，margin重叠有什么方法可避免？

第一个div，我们设置margin-bottom为20px。

html，margin重叠有什么方法可避免？

第二个div的样式，我们设置margin-top为10px。

html，margin重叠有什么方法可避免？

我们原来希望是二个div之间会有30px的间距的，但由于会有重叠，二个间距之间取的是最大值的，即现在只有20px的间距。

html，margin重叠有什么方法可避免？

4此文章未经授权抓取自百度经验

要解决这个重叠的问题，我们可以把其中一个的margin改为padding就行了。

html，margin重叠有什么方法可避免？

但使用padding，需要div不带背景色才行，像现在这样，间距之间被带上了背景色就分不清了。

html，margin重叠有什么方法可避免？

另一种避免重叠的方法，我们可以使用border边框来代替，我们需要设置边框的颜色为背景色的颜色。

html，margin重叠有什么方法可避免？

看现在的效果，二个div的间距现在是30px了。

html，margin重叠有什么方法可避免？

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML