前端面試必備——外邊距合併

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

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

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

相鄰兄弟姐妹元素

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

<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 - 外邊距合併

---

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