外边距合并 · 前端笔记

[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)