外边距合并
当两个垂直方向外边距相遇，它们将形成一个折叠外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
为了好认识，我们称内部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的内边距(补白)和边框的前提！
* {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;}
查看更多关于CSS2系列：外边距合并问题(margincollapse)_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111472