「CSS」Margin Collapsing - 外邊距合并

外邊距合并在排版上帶來非常大的便利，但是人們對其不甚了解，導緻使用外邊距的時候總是出現繁多問題，今日寫下一片文章，總結一下外邊距合并。

三種基本的外邊距合并

隻有上外邊距和下外邊距才會觸發外邊距合并，左外邊距和右外邊距不會。外邊距合并都是基于以下三種基本的外邊距合并。

1. 相鄰的同胞元素

我們考慮兩個連續的 div，他們的上下左右的邊距都是 50px。此時，第一個區域的下外邊距 和 第二個區域的上外邊距 合并，故他們的間隔是 50px。

<style>
    .margin-box {
        width: 50px;
        height: 50px;
        margin: 50px;
        background: #fae900;
    }
</style>

<div class="margin-box"></div>
<div class="margin-box"></div>
           

中間邊距合并啦～

2. 父元素與子元素

• 第一個子元素的上外邊距和父元素的上外邊距會進行合并
• 最後一個子元素的下外邊距和父元素的下外邊距會進行合并

合并的視覺效果就是這些合并的外邊距 表現為父元素的外邊距。

我們使用一個有顔色區域包含另外一個不同顔色的區域。裡面的區域所有的外邊距設為50px。

<div style="background: #cccdd1;">
    <div class="margin-box"></div>
</div>
           

我們可以看到， margin-box 的左邊和右邊都展示為 #cccdd1, 而由于上邊和下邊的外邊距和父元素的合并了，并表示為父元素的外邊距，故顔色為父元素的父元素的背景色（若又發生合并，遞推即可）。

細心的讀者會發現，我并沒有設定父元素的 margin，何來合并一說？

這是因為當 margin 為 0 的時候也會發生合并。

3. 空元素

它自己的上外邊距和下外邊距合并了。°(°ˊДˋ°) °

阻止外邊距合并

第二種情況不合并

1. 設定 overflow: hidden;（不為 visible 都可）。
2. 由于 margin 需要直接接觸才能夠合并，根據盒子模型，我們可以設定父元素的 邊框 或 内邊距，或者使用某些元素将第一個元素和父元素隔開（那就不是第一個元素了）。

三種情況都不合并

1. 隻有在靜态流的元素才會發生外邊距合并，故設定 float, position: absolute; 都可以使得外邊距在何種情況都不合并。
2. inline-block 是個例外，它既沒有脫離文檔流，但是它的所有的外邊距都不會合并。

DEMO

聽說技術文章和 DEMO 更配噢～

git clone https://github.com/JasonKid/fezone.git 搜尋 Margin Collapsing