[分享]css中div距离会叠加吗

.div1 { margin: 10px; background-color: red; height: 100px; } .div2 { margin: 10px; background-color: blue; height: 100px; }

在CSS中，<div>是一个常见的HTML元素，它是一种块级元素，通常用于分组HTML中的其他元素。当在CSS中使用margin属性时，会让多个<div>元素之间产生距离。那么问题来了，这些距离会叠加吗？

事实上，当设置CSS中的margin属性时，距离既可以叠加，也可以不叠加，这取决于你如何设置该属性的值。

<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div> 

以上是两个<div>元素，它们都设置了margin属性为10px。因此，它们之间的距离为20px（两个margin属性之和）。如果你添加第三个<div>元素，然后给它设置同样的margin属性，那么该元素与前面的两个元素之间的距离就会增加至30px。

<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
<div class="div1">DIV 3</div> 

然而，有一种方法可以避免这种距离叠加的情况。如果你将margin属性设置为一个负值，那么元素之间的距离就会缩小，而不是增加。以下示例将第二个<div>元素的margin-top属性设置为-10px，可以看到与前面的<div>元素之间的距离减少了。

<div class="div1">DIV 1</div>
<div class="div2" style="margin-top:-10px;">DIV 2</div>
<div class="div1">DIV 3</div> 

总之，使用margin属性时，指定正或负的值会影响元素之间的距离。为了避免距离叠加，使用负值来缩小距离。