外邊距合併

首先理解什麼是塊格式化上下文

塊格式化上下文（Block Formatting Context，BFC）

是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。

下列方式會建立塊格式化上下文：

根元素或包含根元素的元素

• 浮動元素（元素的 float 不是 none）
• 絕對定位元素（元素的 position 爲 absolute 或 fixed）
• 行內塊元素（元素的 display 爲 inline-block）
• 表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
• 表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
• 匿名錶格單元格元素（元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
• overflow 值不爲 visible 的塊元素
• display 值爲 flow-root 的元素
• contain 值爲 layout、content或 strict 的元素
• 彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
• 網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
• column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中（標準變動，Chrome bug）。

外邊距合併

塊級元素的上外邊距和下外邊距有時會合並（或摺疊）爲一個外邊距，其大小取其中的最大者，這種行爲稱爲外邊距摺疊（margin collapsing），有時也翻譯爲外邊距合併

相鄰元素之間

毗鄰的兩個元素之間的外邊距會摺疊（除非後一個元素須要清除以前的浮動）。

父元素與其第一個或最後一個子元素之間

若是在父元素與其第一個子元素之間不存在邊框、內邊距、行內內容，也沒有建立塊格式化上下文、或者清除浮動將二者的 margin-top 分開；或者在父元素與其最後一個子元素之間不存在邊框、內邊距、行內內容、height、min-height、max-height將二者的 margin-bottom 分開，那麼這兩對外邊距之間會產生摺疊。此時子元素的外邊距會「溢出」到父元素的外面。

空的塊級元素

若是一個塊級元素中不包含任何內容，而且在其 margin-top 與 margin-bottom 之間沒有邊框、內邊距、行內內容、height、min-height 將二者分開，則該元素的上下外邊距會摺疊。

一些須要注意的地方：

• 上述狀況的組合會產生更復雜的外邊距摺疊。
• 即便某一外邊距爲0，這些規則仍然適用。所以就算父元素的外邊距是0，第一個或最後一個子元素的外邊距仍然會「溢出」到父元素的外面。
• 若是參與摺疊的外邊距中包含負值，摺疊後的外邊距的值爲最大的正邊距與最小的負邊距（即絕對值最大的負邊距）的和。
• 若是全部參與摺疊的外邊距都爲負，摺疊後的外邊距的值爲最小的負邊距的值。這一規則適用於相鄰元素和嵌套元素。

父元素與其第一個或最後一個子元素之間

是指沒有被非空內容、padding、border 或 clear 分隔開，說明其位置關係。

注意一點，在沒有被分隔開的狀況下，一個元素的 margin-top 會和它普通流中的第一個子元素(非浮動元素等)的 margin-top 相鄰； 只有在一個元素的 height 是 "auto" 的狀況下，它的 margin-bottom 纔會和它普通流中的最後一個子元素(非浮動元素等)的 margin-bottom 相鄰。

<div style="border:1px solid red; width:100px;height: 200px;">
    <div style="background-color:green; width:50px; margin: 0 auto;">
       <div style="margin-top:100px; ">
         <div style="height: 50px"></div>
       </div>
    </div>
</div>
複製代碼

效果如圖

更改成建立塊格式化上下文之後

<div style="border:1px solid red; width:100px;height: 200px;">
    <div style="background-color:green; width:50px; margin: 0 auto;display: inline-block;">
       <div style="margin-top:100px; ">
         <div style="height: 50px"></div>
       </div>
    </div>
</div>
複製代碼