盒模型之margin的叠加与加倍

1、上下margin叠加问题
当两个对象呈上下关系，都具备margin属性，同时都不是浮动，这时候margin属性会造成外边距的叠加。
html代码如下所示：

<div id="a"></div>
<div id="b"></div>

css如下：

*{margin:0px;padding:0px;}
#a {
 background-color: #999;
 height: 100px;
 width: 200px;
 margin:10px;
}
#b {
 background-color: #969;
 height: 100px;
 width: 200px;
 margin:10px;
}

而真实情况呢？

上面的div跟下面的div间隔看起来10px，而不是我们预想的20px哦。注意，这里不是一个bug，而是CSS的设计者故意而为之，因为他们考虑到如果我们要对段落进行控制，如果第一段与上方距离10px，那第二段与第一段之间的距离就变成20px，这不是我们想要的，因此故意设计出了margin的上下叠加。
然后，如果一定要消除叠加的话，只需要给下面那个div添加像左浮动就好了。

2、如果我们把这两个div都向左浮动的话，自然也不存在margin上下空白叠加的问题，但是新的问题又来了——在IE 6中出现的左右margin加倍问题。
css代码如下：

*{margin:0px;padding:0px;}
#a {
 background-color: #999;
 height: 100px;
 width: 200px;
 margin:10px;
 float: left;
}
#b {
 background-color: #969;
 height: 100px;
 width: 200px;
 margin:10px;
 float: left;
 clear: left;
}

见效果图：

IE 6


Firefox

是的，IE 6又让我纠结了，不过好在有解救的办法，设置对象的display:inline;就可以搞定了。
修改后代码如下：

*{margin:0px;padding:0px;}
#a {
 background-color: #999;
 height: 100px;
 width: 200px;
 margin:10px;
 float: left;
 display: inline;
}
#b {
 background-color: #969;
 height: 100px;
 width: 200px;
 margin:10px;
 float: left;
 clear: left;
 display: inline;
}

效果如下：

IE 6

看，得到想要的效果了，哈哈哈！