外邊距摺疊 margin合拼
阿新 • • 發佈：2019-01-12
外邊距摺疊 margin合拼
外邊距摺疊（margin collapsing）
對於塊級元素而言，其 上外邊距 和 下外邊距 這兩個有時會合並（或摺疊）為一個外邊距，其大小取其中的最大者，也被稱作外邊距合併。
margin 合併的三種基本情況
相鄰元素
毗鄰的兩元素之間的外邊距會合並（除非後者兄弟元素清除浮動，因為浮動和絕對定位的元素的外邊距不會摺疊）
塊級父元素與其第一個（頭，上邊距合併）或最後一個子元素（尾，下邊距合併）
父元素與頭之間，如果沒有以下內容將兩者的 margin-top 分開：
上邊框（border-top）、上內邊距（padding-top）、行內內容（inline content）、建立 BFC、清除浮動；那麼這個塊級元素和其第一個子元素的上邊距就可以說“捱到了一起”。此時這個塊級父元素和其第一個子元素就會發生上外邊距合併的現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者，而父元素與該子元素之間邊距消失。
父元素與尾之間，如果沒有以下內容將兩者的 margin-bottom 分開：
下邊框（border-bottom）、內邊距（padding-bottom）、行內內容（inline content）、height、min-height、max-height；
那麼這兩對外邊距之間會產生摺疊，而此時子元素的外邊距會“溢位”到父元素的外面。
空塊元素
如果存在一個空的塊級元素，其border、padding、inline content、height、min-height都不存在，那麼此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合並。
Reference：