当两个对象呈上下关系,都具备margin属性,同时都不是浮动,这时候margin属性会造成外边距的叠加。
html代码如下所示:
css如下:<div id="a"></div>
<div id="b"></div>
而真实情况呢?*{margin:0px;padding:0px;}
#a {
background-color: #999;
height: 100px;
width: 200px;
margin:10px;
}
#b {
background-color: #969;
height: 100px;
width: 200px;
margin:10px;
}
![盒模型之margin的叠加与加倍 - chen_zx_happy - chen_zx_happy的博客](https://i-blog.csdnimg.cn/blog_migrate/c98337f8421c465f9aea7b027a6f24e3.png)
上面的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;
}
![盒模型之margin的叠加与加倍 - chen_zx_happy - chen_zx_happy的博客](https://i-blog.csdnimg.cn/blog_migrate/82caddf9fa69663598a28793923269ae.png)
IE 6
![盒模型之margin的叠加与加倍 - chen_zx_happy - chen_zx_happy的博客](https://i-blog.csdnimg.cn/blog_migrate/e67ea8aea08c590d17c336cb08dd94a1.png)
Firefox
修改后代码如下:
效果如下:*{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;
}
![盒模型之margin的叠加与加倍 - chen_zx_happy - chen_zx_happy的博客](https://i-blog.csdnimg.cn/blog_migrate/d7d743b6fa303baa5c19812f154321bc.png)
IE 6