-
CSS外边距合并问题实验文档
2010-07-02 09:15/点击数()
关于margin边距合并的一些研究文档。希望可以对大家有帮助。 比较的浏览器：IE6/IE7/FF3 1.一般情况下，一个盒子里面没有填充内容时，自身的上下margin会发生合并。 2.当如存在border-top或者border-bottom时，自身的上下margin不合并。 3.当存在padding-top
关于margin边距合并的一些研究文档。希望可以在网页设计方面对大家有帮助。
比较的浏览器：IE6/IE7/FF3
1. 一般情况下，一个盒子里面没有填充内容时，自身的上下margin会发生合并。
2. 当如存在border-top或者border-bottom时，自身的上下margin不合并。
3. 当存在padding-top或者padding-bottom时，自身的上下margin不合并。但是为padding-bottom时，背景色不会显示。
4. 当设置了zoom: 1/width: x;之后，IE6/IE7上下margin不合并。且盒子的高度和font-size的高度一致。FF3没有没有haslayout，不受影响。
5. 当设置了height属性之后，IE6/IE7的上下marign不合并，但高度IE7会使用height值，IE6使用font-size的高度。FF3的表现和IE7一致。
6. 填充文字进去，并不设置高度，所有浏览器的表现一致，即：上下margin不合并，且盒子的高度受到font-size影响。如果同时还设置了line-height值，那么盒子高度会根据line-height的值和行数来决定。
7. 如果没有填充内容，而设置了overflow: hidden;属性，那么，FF下，下上margin值不合并，但是盒子高度默认为0；IE7下，上下margin不合并，且盒子高度受font-size影响（但不受line-height影响）。IE6上下边距合并。
8. 填充内容，且设置高度，那么，上下边距不合并。IE7及FF3下，盒子高度被高度值限定。IE6下，盒子高度被line-height值限制(不设置line-height时候，可以通过font-size值来间接设置line-height)。
两个盒子相互嵌套的情况(内盒有填充，固定高度、行高、字号，外盒没有触发HasLayout)：
1. 内外盒子的上margin和上margin合并，下margin和下margin合并。
2. 外盒加上zoom: 1;触发haslayout，IE6/IE7下两个盒子的margin不再合并，外盒被撑开露出背景色。FF不受影响。
3. 外盒设置了padding-bottom时，FF下内外盒子的margin-bottom不再合并外盒子的margin-bottom只受到外盒子的margin-bottom控制，内盒子的margin-bottom仅仅会把外盒子的高度撑开，至于margin-top则照常合并。在IE6/IE7下，margin-bottom依旧合并，即外盒子的margin-bottom受到外盒或者内盒中的margin-bottom值较大者控制。
4. 外盒设置了padding-top属性时，FF3下，内外盒子的margin-top不合并。内盒的maring-top会把外盒的高度撑高。而IE6/IE7下，内外盒子的margin-top不合并，即外盒子的margin-top不会受到内盒子的margin-top（即使内盒的margin-top更高）影响，内盒的margin-top也不会把外盒的高度撑开，换句话讲，在IE6/IE7下，内盒子的margin-top完全失效了。
5. 外盒设置了border-bottom时，情况类似设置了padding-bottom，FF3下，外边距没有发生合并。而IE6/IE7发生了合并现象。
6. 外盒设置了border-top时，情况类似设置了padding-top，FF3下，外边距没有发生合并，内盒子的margin-top会撑高外盒子的高度，外盒子的margin-top由外盒子自己的margin-top控制。类似的，IE6/IE7下，margin-top不生效。两个盒子相互嵌套的情况(和上个实验比较，这次触发了外盒的haslayout)：
1. 同上个实验一样的基础，外盒加上zoom: 1初发haslayout(FF3加上overflow: hidden测试)。三个浏览器的表现一致，没有发生上下边距的合并现象。
2. 在1的基础上，外盒子加上padding-bottom值之后，结果同1，没有边距合并。
3. 在1的基础上，外盒子加上padding-top值之后，FF3结果同1，没有发生边距合并。但是IE6/IE7下，出现十分奇怪的现象，内盒子的margin-top会先抵消掉外盒子的padding-top值，即内盒的margin-top值减去外盒的padding-top值后的数值才加到外盒子的高度上去。
4.
Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css">
body, div { margin: 0; padding: 0;}
#div1 {
background: red;
margin-top: 20px;
margin-bottom: 20px;
border-top: 10px solid #00f;
}
#div2 {
background: gray;
margin-top: 60px;
margin-bottom: 30px;
font-size: 20px;
line-height: 20px;
height: 20px;
}
#div3 { height: 30px; background: #000; margin: 0px;}
</style>
</head>
<body>
<div id="div3"></div>
<div id="div1">
<div id="div2">TEST</div>
</div>
<div id="div3"></div>
</body>
</html>
本文链接：http://www.xingfu880.com/blog/css/767.html
幸福工作室--广州网站建设，广州美工设计（www.xingfu880.com）
上一篇：一些z-index的技术整理
下一篇：精选30个优秀的CSS技术和实例
