在HTML和CSS中，元素通常都含有內部內容和一些邊框、內邊距和外邊距。當我們對元素設置外邊距時，可能會出現左右外邊距疊加的情況。

外邊距疊加是指，當相鄰的兩個元素都設置了外邊距時，它們之間的距離將是它們兩個邊距中的最大值，而不是兩個邊距之和。

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

在上面的例子中，我們給兩個相鄰的div元素都設置了20px的外邊距，但它們之間的間距實際上是40px。這是因為它們的外邊距發生了疊加。

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

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

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

2. 為父元素添加一個border、padding或者內部的內容。

<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>

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

總的來說，了解并掌握外邊距疊加的規則和解決方法，在CSS布局中會很有幫助。