margin合并整理

阅读更多

多个段落为了美观，浏览器会将它们的垂直距离变得统一，这是一种很常见的现象，在规范中这种现象正式名称叫做： collapsing-margins （margin合并） 。

 

 

margin合并的发生要求很多必要的条件：

1. 水平margin不会合并。

2. 两个上下渲染相邻（不一定是兄弟节点）的块状元素在正常页面流情况下会发生 margin 合并。

3. 浮动元素不会和任何元素（包括子孙节点）发生 margin 合并。

4. overflow！=visible的元素不和任何元素发生margin合并。

5. 绝对定位的元素不和任何元素发生margin合并。

6. inline-block 的元素不和任何元素发生margin合并。

7. 设置 clear 属性的元素不和任何元素发生margin合并。

8. 根元素不和任何元素发生margin合并。

9. 父节点和第一个子节点发生margin-top合并。

10. 如果最后一个子节点没有border以及padding，则和其父节点发生margin-bottom合并。

 

 

除了标准，还得注意 IE ，特别是 hasLayout 对于 margin 合并也有影响，从而也造成了包含的绝对定位元素的位置差异。

详见：

 

1.ie6,7 haslayout 对 margin 合并的影响

2.ie6,7的进一步测试

3.ie6,7 margin 合并差异对于内部绝对定位元素的位置影响

 

• 
• 大小: 28.3 KB

• 查看图片附件