外邊距合并 · 前端筆記

[TOC] # 外邊距合并塊級元素的[上外邊距](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top)和[下外邊距](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom)有時會合并（或折疊）為一個外邊距，其大小取其中的最大者，這種行為稱為**外邊距折疊**（margin collapsing），有時也翻譯為**外邊距合并**。注意[浮動元素](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)和[絕對定位元素](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#absolute)的外邊距不會折疊。下面列出了會發生外邊距折疊的三種基本情況： ## 相鄰元素之間毗鄰的兩個元素之間的外邊距會折疊（除非后一個元素需要[清除之前的浮動](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear)）。 ![CSS 外邊距合并實例 1](http://www.w3school.com.cn/i/ct_css_margin_collapsing_example_1.gif) <br> <br> <br> <br> ~~~ <!doctype HTML> <html> <head> <style> * { margin: 0; padding: 0; border: 0; } #d1 { width: 100px; height: 100px; margin-top: 20px; margin-bottom: 20px; background-color: red; } #d2 { width: 100px; height: 100px; margin-top: 10px; background-color: blue; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <p>請注意，兩個 div 之間的外邊距是 20px，而不是 30px（20px + 10px）。</p> </body> </html> ~~~ ![](https://box.kancloud.cn/69054848b0c5205d19caef7b50cc66f5_539x266.png) <br> <br> ## 父元素與其第一個或最后一個子元素之間如果在父元素與其第一個子元素之間不存在邊框、內邊距、行內內容，也沒有創建[塊格式化上下文](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)、或者[清除浮動](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear)將兩者的?[`margin-top`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top "?margin-top?屬性用來設置元素的頂部外邊距，你也可以使用負值。這個屬性對于不可替換的inline元素沒有效果,比如或者 .")?分開；或者在父元素與其最后一個子元素之間不存在邊框、內邊距、行內內容、[`height`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/height)、[`min-height`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height "CSS屬性 min-height?通常用來設置一個元素的最小高度。這個屬性（min-height）不允許一個元素的高度（height）小于這個元素指定的最小高度（min-height）。")、[`max-height`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-height "此頁面仍未被本地化, 期待您的翻譯!")將兩者的?[`margin-bottom`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom "CSS的?margin-bottom 屬性用于設置元素的底部外邊距，允許設置負數值。一個正數值將讓它相對于正常流與鄰近塊更遠，而負數值將使得更近。該屬性對于不可替代(non-replaced 元素在規范中有概念，請自行搜索)的行級元素沒有效果，比如：或者 .")?分開，那么這兩對外邊距之間會產生折疊。此時子元素的外邊距會“溢出”到父元素的外面。 ![](https://box.kancloud.cn/dbf702f86491232fcd5563c1afa32999_504x195.png) <br> <br> ~~~ <!DOCTYPE html> <html> <head> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } #outer { width: 300px; height: 300px; background-color: red; margin-top: 20px; } #inner { width: 50px; height: 50px; background-color: blue; margin-top: 10px; } </style> </head> <body> <div id="outer"> <div id="inner"> </div> </div> <p>注釋：請注意，如果不設置 div 的內邊距和邊框，那么內部 div 的上外邊距將與外部 div 的上外邊距合并（疊加）。</p> </body> </html> ~~~ <br> <br> ![](https://box.kancloud.cn/7076b3550a14e901cc19415ace39fd54_817x348.png) ## 多個子元素外邊距合并只有當前一個子級的寬高為0的時候，換句話說，前一個子級元素沒有辦法限制后一個子級的margin的越界的時候才會出現這種情況（當然首先父級也無法限制子級的margin越界才可以） ![](https://box.kancloud.cn/fa3cdcf56b85bb1b768d2488927bd441_504x122.png) ~~~ <!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; } #div1 { margin-top: 10px; background: red; } #div11 { margin-top: 20px; width: 0; height: 0; background: yellow; } #div12 { margin-top: 30px; width: 50px; height: 50px; background: blue; } </style> </head> <body> <div id="div1"> <div id="div11"></div> <div id="div12"></div> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/4fa21cfbfa68f3c6163f9214aee37688_217x269.png) ## 空的塊級元素如果一個塊級元素中不包含任何內容，并且在其[`margin-top`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top "?margin-top?屬性用來設置元素的頂部外邊距，你也可以使用負值。這個屬性對于不可替換的inline元素沒有效果,比如或者 .")?與?[`margin-bottom`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom "CSS的?margin-bottom 屬性用于設置元素的底部外邊距，允許設置負數值。一個正數值將讓它相對于正常流與鄰近塊更遠，而負數值將使得更近。該屬性對于不可替代(non-replaced 元素在規范中有概念，請自行搜索)的行級元素沒有效果，比如：或者 .")?之間沒有邊框、內邊距、行內內容、[`height`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/height)、[`min-height`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height "CSS屬性 min-height?通常用來設置一個元素的最小高度。這個屬性（min-height）不允許一個元素的高度（height）小于這個元素指定的最小高度（min-height）。")?將兩者分開，則該元素的上下外邊距會折疊。 ## 一些需要注意的地方 * 上述情況的組合會產生更復雜的外邊距折疊。 * 即使某一外邊距為0，這些規則仍然適用。因此就算父元素的外邊距是0，第一個或最后一個子元素的外邊距仍然會“溢出”到父元素的外面。 * 如果參與折疊的外邊距中包含負值，折疊后的外邊距的值為最大的正邊距與最小的負邊距（即絕對值最大的負邊距）的和。 * 如果所有參與折疊的外邊距都為負，折疊后的外邊距的值為最小的負邊距的值。這一規則適用于相鄰元素和嵌套元素。 ![](https://box.kancloud.cn/de181f48737ace5696927aa99359a5b2_133x129.png) ~~~ <!doctype HTML> <html> <head> <style type="text/css"> .blue { margin-bottom: 10px; width: 100px; height: 50px; background: blue; } .red { margin-top: 10px; width: 100px; height: 50px; background: red; } </style> </head> <body> <div class="blue"></div> <div class="division"></div> <div class="red"></div> </body> </html> ~~~ ![](https://box.kancloud.cn/9660aa363e65505bccd5a6a586794bb7_174x142.png) ~~~ <!doctype HTML> <html> <head> <style type="text/css"> .blue { margin-bottom: 10px; width: 100px; height: 50px; background: blue; } .division { padding: 1px; } .red { margin-top: 10px; width: 100px; height: 50px; background: red; } </style> </head> <body> <div class="blue"></div> <div class="division"></div> <div class="red"></div> </body> </html> ~~~ # 參考資料 [CSS外邊距合并（塌陷/margin越界） - 前端路上的小兵 - 博客園](https://www.cnblogs.com/shcrk/p/9311273.html) [外邊距合并 - CSS：層疊樣式表 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)