margin合并问题思考

最近做任务的时候发现margin-top存在一个很奇怪的现象，就是父级盒模型不加padding或border的时候内部文档流中第一个子集的margin-top会将父元素向下拉去，导致父级“下陷”，如下图所示：


从图一中可以看出，子集盒模型已设置margin-top值，但从图二中可以看出父级盒模型的content顶部明显下降，并非是我们想要的效果。这是常见的margin合并问题，由于盒模型是在编写css样式过程中必须掌握的知识，其中涉及的margin、padding、border的属性设置将直接影响盒子定位，因此有必要将margin合并问题做以下总结，只有非常清楚其中的原理才能游刃有余的解决盒模型中存在的“奇怪”问题。

如何解决

一个盒模型如果没有上补白（padding-top）或上边框（border-top），那么这个盒子的上边据（margin-top）会和其内部文档流中第一个子元素的上边距重叠，这是父级元素与子集元素margin-top产生合并的原因。
当然，还有兄弟元素之间的合并，相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的“毗邻”合并，水平方向不存在其现象。最常见的应用实例就是段落p标签的使用，p标签本身有上下1em的margin，但是在相邻的p标签之间只会显示1em的间距而不是相加为2em的间隔。

如论是margin的“嵌套”合并还是“毗邻”合并在一般标准浏览器中都会出现，但在IE6和IE7不会出现此现象。
总的来说“嵌套”合并产生的条件有：

1. 父级的上边距与子级的上边距之间没有border；
2. 父级的上边距与子级的上边距之间没有非空内容；
3. 父级的上边距与子级的上边距之间没有padding；
4. 父级和子级中没有设置定位属性（除static和relation）、overflow（除visible）或display:inline-block等；
5. 父级或子级都没有设置浮动。

因此，只有破坏以上其中一种产生条件便可解除“嵌套”合并，解决方案如下：

1. 为父级添加border（一般不用）
2. 在子元素前面添加额外的元素，设置display:block;height:1px;overflow:hidden（累赘，不建议）
3. 修改父级高度，添加padding-top或将子元素的maigin-top改成padding-top（常用）
4. 父级添加overflow:hidden属性（终结者，建议使用）
5. 子集元素设置display:inline-block属性
6. 父级或子级设置浮动属性（看布局需要）
7. 父级或子级申明绝对定位（看布局需要）

另外，解决“毗邻”合并的解决方案有：

1. 设置绝对定位position:absolute的盒模型
2. 设置float属性的盒模型；
3. 设置display:inline-block的盒模型。