css - div的不同边距不起作用

Question

我想使用分区制作圆圈，每个圆圈都有不同的边距。问题是对另一个影响最大的影响div较小。margin-topmargin topdiv

这是HTML：

<div class="circle size2 marginTop2"></div>
<div class="circle size1 marginTop1" ></div>

这是CSS：

div.circle{

display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
background: pink;
opacity: 0.3;
margin-top: 0px;

}

div.size1{
   width:120px;
   height:120px;
}

div.size2{
   width:130px;
   height:130px;
}

div.marginTop1{
    margin-top: 20px;
    margin-right:-10px;
}
div.marginTop2{
 margin-top: 140px
 } 

这是代码：

http://jsfiddle.net/L6gPd/

div影响较小margin-top且边缘较大的顶部。

请问有什么解释吗？

Answer 1

从您的问题中并不完全清楚，但是您是否试图让它们在垂直方向上具有不同的高度？如果是这样，将尝试添加

vertical-align:top;到 marginTop1 和 marginTop2 类，因此 margin-top 值将生效。

Answer 2

如果要将它们并排放置，请添加float:left;到div.circle.

如果您使用 Firebug 或 Chrome 开发者工具检查该元素，您会看到第二个圆圈具有margin-top的只是，20px但它与第一​​个圆圈的位置相关，而不是从页面顶部开始。