邊距崩潰

當兩個邊距垂直相互接觸時，它們會摺疊。當兩個邊距水平接觸時，它們不會摺疊。

相鄰垂直邊距的示例：

考慮以下樣式和標記：

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

它們相距 10px，因為垂直邊距會在一個和另一個上方崩潰。 （間距不是兩個邊距的總和。）

相鄰水平邊距的示例：

考慮以下樣式和標記：

span{
    margin: 10px;
}

<span>some</span><span>content</span>

它們相距 20px，因為水平邊距不會在一個和另一個上崩潰。 （間距將是兩個邊距的總和。）

重疊不同的尺寸

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

這些元素將垂直間隔 15px。邊距儘可能多地重疊，但較大的邊距將決定元素之間的間距。

重疊利潤率

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

這兩個文字之間的間距是多少？ （懸停看答案）

間距為 25px。由於所有四個邊距相互接觸，它們將會崩潰，因此使用四個邊緣中的最大邊距。

現在，如果我們在上面的標記中新增一些邊框，那該怎麼辦呢？

div{
    border: 1px solid red;
}

這兩個文字之間的間距是多少？ （懸停看答案）

間距為 59px！ 現在只有 .outer-top 和 .outer-bottom 的邊距相互接觸，並且是唯一的摺疊邊距。剩餘的邊距由邊框分隔。所以我們有 1px + 10px + 1px + 15px 的 + 20px + 1px + 25px + 1px。 （1px 是邊界……）

摺疊父元素和子元素之間的邊距：

HTML：

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

在上面的示例中，僅適用最大的邊距。你可能已經預期該段落將位於距離 h1 60px 處（因為 div 元素的邊距頂部為 40px 而 p 的邊距為 20px）。這種情況不會發生，因為邊距會一起摺疊形成一個邊距。