这是一个创建于 4266 天前的主题，其中的信息可能已经有所发展或是发生改变。
css的代码是这个
.a{
width:950px;
height:500px;
background:#aabbcc;
}
.b{
width:240px;
height:200px;
background:#ff0000;
margin-left:15px;
margin-top:125px;
}
html的代码是这个
<div class="a">
<div class="b"></div>
</div>
问题是，用了margin-left后，b盒子距离a盒子左侧有5px的外边距
但是用了margin-top后，2个盒子都同时向上出现125px的外边据，这是为什么呢？
我的问题是，为什么上边距加上去后，对ab2个盒子都产生了作用，而只加左边距，那么就只对b盒子产生了作用。
.a{
width:950px;
height:500px;
background:#aabbcc;
}
.b{
width:240px;
height:200px;
background:#ff0000;
margin-left:15px;
margin-top:125px;
}
html的代码是这个
<div class="a">
<div class="b"></div>
</div>
问题是，用了margin-left后，b盒子距离a盒子左侧有5px的外边距
但是用了margin-top后，2个盒子都同时向上出现125px的外边据，这是为什么呢？
我的问题是，为什么上边距加上去后，对ab2个盒子都产生了作用，而只加左边距，那么就只对b盒子产生了作用。
 |
1
best1a 2013-03-31 18:51:09 +08:00  1
|
 |
2
zetttt 2013-03-31 18:59:35 +08:00 1
就是简单的浮动问题
给.a 加个 float:left 就好了 |
 |
3
shpasspass OP @best1a 原来还有这么一说。hoho
|
|
4
shpasspass OP @zetttt 原来还可以这样,hoho
|
 |
5
emric 2013-03-31 19:19:39 +08:00 1
LS说对了,这个属于边距重叠的问题.
给父元素设置overflow:hidden,就OK/ 还有几种方法: http://www.benben.cc/blog/?p=98 参考&文档: http://www.w3.org/TR/CSS21/box.html#collapsing-margins |
Select Language