CSS Vertical Margin Collapse

一、什麼是CSS Vertical Margin Collapse

CSS垂直邊距摺疊指當相鄰的兩個塊級元素上下邊距相遇時，它們中間的邊距會”摺疊”（也稱為”合併”）成單個邊距。這種現象就是CSS Vertical Margin Collapse。

二、為什麼會出現CSS Vertical Margin Collapse

出現這種情況的根本原因是，CSS的邊距合併規則是，相鄰的塊級元素的上下外邊距會合併為一個較大的外邊距，這導致多個元素之間的邊距不存在了，只留下了其中最大的邊距。當相鄰的兩個塊級元素上下邊距重合時，就會發生這種合併現象。

三、哪些元素會出現CSS Vertical Margin Collapse

在正常情況下，只有左右外邊距不會發生摺疊，而上下外邊距可能出現摺疊。

1.相鄰兄弟元素之間的摺疊：

<div class="box1">
    This is box1.
</div>
<div class="box2">
    This is box2.
</div>
.box1,.box2{
    margin-top:20px;
    margin-bottom:30px;
}

這個例子中， box1 和 box2 這兩個相鄰的塊級元素之間通過CSS設置了上下邊距，由於它們的邊距重疊，因此 box2 的上外邊距會和 box1 的下外邊距合併，實際上它們之間的外邊距只有 30px 而不是 50px。

2.父元素和第一個子元素之間的摺疊：

<div class="parent">
    <div class="child">This is child1.</div>
    <div class="child">This is child2.</div>
</div>
.parent{
    margin-bottom:10px;
}
.child{
    margin-top:20px;
}

由於子元素的邊距重疊，父元素的下外邊距和第一個子元素的上外邊距會合併為單個的外邊距。這個例子中， parent 元素的下外邊距是 10px，但是由於合併的邊距，它看起來只有 20px，而不是 30px。

3.兄弟元素和祖先元素之間的摺疊：

<div class="grand-parent">
    <div class="parent">
        <div class="child">This is child1.</div>
        <div class="child">This is child2.</div>
    </div>
</div>
.grand-parent{
    margin-top:40px;
}
.parent{
    margin-top:20px;
}
.child{
    margin-top:10px;
}

在這個例子中，grand-parent 元素設置了 40px 的上外邊距，父元素 parent 設置了 20px 的上外邊距，而 child1 元素設置了 10px 的上外邊距。由於邊距重疊，實際上grand-parent和parent之間的外邊距只有20px，而parent和child1之間的外邊距只有10px

四、如何避免CSS Vertical Margin Collapse

1.使用padding代替margin

通過使用padding代替margin，可以避免元素的上下外邊距摺疊。由於padding會覆蓋內容，因此它不能完全代替margin。

2.使用定位元素避免摺疊

如果將第一個元素相對於父元素進行定位，可以防止父元素和第一個元素之間的垂直邊距摺疊。同理，將最後一個元素的底部邊緣與父元素的底邊緣相對齊，也可以避免父元素和最後一個元素之間可能出現的垂直邊距摺疊。

3.使用border-top或者border-bottom來代替外邊距

另一個方法是，使用 border-top 或 border-bottom 代替 margin，這樣就避免了邊距合併的問題。這個方法要求在元素之間加入分割線，因此並不適用於所有情況。

五、總結

CSS Vertical Margin Collapse是前端開發中常見的問題, 合理地使用padding，定位元素或border，可以避免margin collapse帶來的影響。