在HTML和CSS中，元素通常都含有內(nèi)部?jī)?nèi)容和一些邊框、內(nèi)邊距和外邊距。當(dāng)我們對(duì)元素設(shè)置外邊距時(shí)，可能會(huì)出現(xiàn)左右外邊距疊加的情況。

外邊距疊加是指，當(dāng)相鄰的兩個(gè)元素都設(shè)置了外邊距時(shí)，它們之間的距離將是它們兩個(gè)邊距中的最大值，而不是兩個(gè)邊距之和。

<div class="box"></div>
<div class="box"></div>
<style>
.box {
margin: 20px;
background-color: red;
height: 50px;
}
</style>

在上面的例子中，我們給兩個(gè)相鄰的div元素都設(shè)置了20px的外邊距，但它們之間的間距實(shí)際上是40px。這是因?yàn)樗鼈兊耐膺吘喟l(fā)生了疊加。

如果我們不想要外邊距疊加的效果，可以采用以下方法：

1. 將相鄰元素的外邊距分別設(shè)置為不同的值。

<div class="box1"></div>
<div class="box2"></div>
<style>
.box1 {
margin-right: 20px;
}
.box2 {
margin-left: 20px;
}
</style>

2. 為父元素添加一個(gè)border、padding或者內(nèi)部的內(nèi)容。

<div class="parent">
<div class="box"></div>
<div class="box"></div>
</div>
<style>
.parent {
overflow: hidden;
}
.box {
margin: 20px;
background-color: red;
height: 50px;
float: left;
}
</style>

在上面的例子中，我們通過為父元素添加了一個(gè)overflow:hidden屬性來(lái)防止外邊距疊加的問題。

總的來(lái)說(shuō)，了解并掌握外邊距疊加的規(guī)則和解決方法，在CSS布局中會(huì)很有幫助。