CSS中margin边界叠加问题及解决方案

 
Thisparagraphhasa20pxmargin.
 

　　div框设置了10像素边界，段落设置了20像素的边界：

#box{  
margin:10px;  
background-color:#d5d5d5;  
}  
p{  
margin:20px;  
background-color:#6699ff;  
}  
 

　　你会自然地认为产生的样式会像图1-1那样，在段落和div之间有20像素的距离，在div外边围绕着10像素的边界。

　　图1-1

　　但是，产生的样式实际上像图1-2。

　　图1-2

　　这里发生了两个情况。首先，段落的20像素上边界和上边界与div的10像素边界叠加，形成一个单一的20像素垂直边界。其次，这些边界不是被DIV包围，而是突出到DIV的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度方式造成的。

　　如果元素没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

　　为了让前面的示例看起来像图1-1这样，只需在div周围添加补白或边框：

#box{  
margin:10px;  
padding:1px;/*或者border:1pxsolidcolor;*/  
background-color:#d5d5d5;  
}  
p{  
margin:20px;  
background-color:#6699ff;  
}  
 

　　边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

补充解决方案：

　　1.外层padding

　　2.透明边框border:1pxsolidtransparent;

　　3.绝对定位postion:absolute:

　　4.外层DIVoverflow:hidden;

　　5.内层DIV　加float:left;display:inline;

　　6.外层DIV有时会用到zoom:1;

【编辑推荐】

1. Firefox下margin-top失效解决技巧
2. IE6.0对padding的解读分析
3. CSS样式表高效使用八大秘诀
4. CSS中margin参数省略原则
5. IE6中常见CSS兼容性解决十大技巧