「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

記得點贊... (╯‵□′)╯︵ ┴─┴