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

外边距合并

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

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

解释

极限情况一个元素

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

例子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;}

例子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;试一试将这个盒子边框加上，是不是还能合并。答案不能！*/

从图中可以看到这个红色边框包裹的高度是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;}

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

不能产生折叠边距的情况