外邊距塌陷 margin collapsing
阿新 • • 發佈：2017-10-09
borde 背景 翻譯 示例 外邊距 邊框 logs sin ack
塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，其大小是組合到其中的最大外邊距，
這種行為稱為外邊距塌陷(margin collapsing)，有的地方翻譯為外邊距合並。
1.相鄰的兄弟姐妹元素
- 毗鄰的兩個兄弟元素之間的外邊距會塌陷（除非後者兄弟姐妹需要清除過去的浮動）。例如：
<p style="margin-bottom: 30px;">這個段落的下外邊距被合並...</p> <p style="margin-top: 20px;">...這個段落的上外邊距被合並。</p>
可以發現這兩個段落中間的距離，不是 ”上面段落的下邊距“ 與 ”下面段落的上邊距“ 的 求和 ，而是兩者中的較大者 （在此示例中為30px）。
2.塊級父元素與其第一個/最後一個子元素
- 如果塊級父元素中，當上邊框寬度（border-top）及上內邊距距離（padding-top）為0時，那麽這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。
- 此時這個塊級父元素和其第一個子元素就會發生上外邊距合並現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。
-
舉一個例子
<style type="text/css"> * { margin: 0; padding: 0; } html { background: black; //html為黑色背景 } body { background: red; //body為紅色背景 } #item { width: 200px; height: 200px; background: pink; //粉色的一個塊元素，設置了margin-top margin-top: 100px; } </style> <body> <div id="item"></div> </body>
運行結果：
發現結果好像不按套路，粉色部分item設置的margin-top卻影響了他的父元素body。如下： 理想結果：
此類出現情況：
1、父元素沒有上邊框 2、為第一個子元素設置上外邊距時解決方案：
1、為父元素增加上邊框 border-top 弊端：父元素會變高 2、通過為父元素設置上內邊距來取代子元素的上外邊距 padding-top 弊端：也會增加父元素的高度 3、在父元素中首部增加一個空 <table>元素 （觸發bfc） 弊端：頁面中多一個空元素而已4.父元素加一個：before偽元素
body:before{
content:"";
display:table;
}
3.空塊元素
- 如果存在一個空的塊級元素，其
border、padding、inline content、height、min-height都不存在。 - 那麽此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合並。例如：
<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將為20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">這個段落的和上面段落的距離將為20px</p>
4.備註
當以上情形同時出現時，外邊距合並會更加復雜（會比較兩個以上外邊距來最終計算出真實的邊距值）。
即使外邊距為0，這些規則也仍舊生效。因此，無論父元素的外邊距是否為0，第一個或者最後一個子元素的外邊距會被父元素的外邊距"截斷"(根據上面的規則)，在負外邊距的情況下，合並後的外邊距為最大正外邊距與最小負外邊距之和。
當有負邊距存在時，合並後的外邊距將是最大正邊距加上最小負邊距（即負邊距中絕對值最大的一個）。
如兩個兄弟元素，上面的元素的下邊距為 20px ，下面的元素的上邊距為 -20px ，那麽發生外邊距合並後，這兩個元素的實際距離將變成 0px 。
BFC會阻止元素外邊距合並。
(點擊：深入理解BFC)
外邊距塌陷 margin collapsing