因本人最近正忙於校招應聘，所以特此設計《前端面試必備》系列，總結面試問題並分享給大家，因能力不足，如有問題，敬請指正，特此感謝。

塊的頂部外邊距和底部外邊距有時候會被摺疊為單個外邊距，其大小為兩值中的最大值，這種行為就被稱為外邊距合併。
一般發生外邊距合併主要有以下三種情況：

• 相鄰兄弟姐妹元素
• 父元素和子元素
• 空元素

相鄰兄弟姐妹元素

兩個兄弟元素之間的外邊距，會取兩個元素外邊距的最大值。

<p style="margin-bottom: 30px;">這個段落的下外邊距被合併...</p>
<p style="margin-top: 20px;">...這個段落的上外邊距被合併。</p>複製程式碼

按照上面的例子可以得出，兩個p元素之間距離為30px。

父元素和子元素

這種情況又可以分為以下兩種：

• 父元素的上外邊距和第一個子元素的上外邊距
• 父元素的下外邊距和最後一個子元素的下外邊距

這兩種情況，最終顯示出來的結果都是取二者中的最大值。

空元素

自己的上外邊距會和自己的下外邊距合併

<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將為20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">這個段落的和上面段落的距離將為20px</p>複製程式碼

這樣第一個p元素和第三個p元素之間距離為20px

阻止合併方法

這部分將講解不會發生外邊距合併的情況。

通用方法

1. 處於靜態流元素會發生合併，所以float和position:absolute都不會發生合併
2. 設定為inline-block ，也不會發生合併

針對於父元素和子元素情況不合並方法

以下都不會發生合併

1. 設定了清除浮動屬性
2. 因為margin需要直接接觸才能合併，所以父元素或子元素中有border或padding，或者二者之間有元素

注意

• 如果兩個外邊距值中有一個為0，也會發生合併。
• 如果有負外邊距，合併後外邊距為最大正邊距加上最小負邊距（絕對值最大的一個），如上面元素下邊距為20px，下面元素上邊距為-20px，則最後為0px

參考資料

外邊距合併MDN
「CSS」Margin Collapsing - 外邊距合併

---

歡迎訂閱掘金專欄和知乎專欄