CSS2系列：外边距合并问题(margincollapse)_html/css

CSS2系列：外边距合并问题(margincollapse)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:23:26

Original

990 people have browsed it

外边距合并

当两个垂直方向外边距相遇，它们将形成一个折叠外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
为了好认识，我们称内部div为"盒子"，包含这个内部div的外部div为"包含体"

解释

怎么相遇：

相邻的两个盒子（可能是兄弟关系也可能是包含关系）这两个元素margin之间不能夹杂着边框啊，补白啊什么的就算margin相遇，这点很重要

哪个方向

一定为垂直方向，水平方向没有

形成一个折叠外边距过程

盒子margintop和包含体margintop取出最终折叠外边距值。下面为取这个值的情况 150 50=150 150 -50=100 -150 -50 =-150 -150 50 =-100
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。可以在下面例子2中，改变一下
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
包含关系时，盒子不显示margin-top(相当没有margin-top)，包含体显示margin-top这个最终值。
兄弟关系时，两兄弟之间的margin共用这个最终值。

极限情况一个元素

当一个块元素，没有补白和填充，上外边距与下外边距就碰到了一起，它们也会发生合并。

例子1包含关系，不设置外层div的内边距(补白)和边框的前提！

<meta charset="utf-8"><style type="text/css">            * {margin:0;padding:0;border:0;}            #outer {width:200px;height:200px;background-color:red;margin-top:-20px;}            #inner {width:50px;height:50px;background-color:blue;margin-top:50px;}</style>

Copy after login

<div id="outer">  <div id="inner">  </div></div><!--不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）,内部div箱单更木有margin-top。外部用这个最大值。-->

Copy after login

例子2兄弟关系

* {margin:0; padding:0;border:0;}#d1 {width:100px;height:100px;margin-top:50px;margin-bottom:50px;background-color:red;}/*改变margin-bottom:-50px;试一试*/#d2 {width:100px;height:100px;margin-top:10px;background-color:blue;}

Copy after login

<div id="d1"></div><div id="d2"></div><!--两个 div 之间的外边距是 50px，并不是 60px（50px + 10px）。-->

Copy after login

例子3本身合并``它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

* {margin:0; padding:0;border:0;}#d1{border: 1px solid red;width: 200px;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}/*border: 1px solid red;试一试将这个盒子边框加上，是不是还能合并。答案不能！*/

Copy after login

<div id="d1">    <div id="d2"></div></div>

Copy after login

从图中可以看到这个红色边框包裹的高度是150px，不是200px。包含体本身木有高度，随着盒子的最后得到的折叠margin自动撑开。

例子3调试注意

但是在浏览器调试的时候，监视盒子的时候，并不是给我们显示折叠margin值。而是显示这个盒子的设定值。这点不要影响，最终的折叠margin值的肯定。

例子3Question!!求答案，想了一下午。

减轻上面的影响请试一试一下代码

* {margin:0; padding:0;border:0;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}<div id="d2"></div>

Copy after login

从上面注意我们知道：调试的时候选中这个元素，显示200px是正常的，但是这个元素距离浏览器上面100px，这个我真不能理解。

不能产生折叠边距的情况

BFC元素不会与兄弟，包含元素产生折叠边距。那么什么是BFC呢？敬请关注我的下一篇文章。