div的不同边距不起作用

我想用分割作圆圈，每个圆都有不同的边距。问题是div与小margin-top影响最大的margin top为另一div。div的不同边距不起作用

这里的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影响具有较大的利润率顶部。

请解释一下吗？

来源

2012-01-03 palAlaa

如果您想将它们并排放置，请将'float：left;'添加到'div.circle'。如果您使用Firebug或Chrome开发人员工具检查元素，则会看到第二个圆的边距仅为20px，但与第一个圆的位置相关，而不是页顶部。 – Virendra 2012-01-03 00:41:43

是的，它的作品，谢谢:) – palAlaa 2012-01-03 00:45:26

@Virendra，你可以把它放在答案部分。 – palAlaa 2012-01-03 01:02:45

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

如果您使用Firebug或Chrome开发人员工具检查元素，您将看到第二个圆圈的margin-top仅为20px，但它与第一个圆圈的位置相关，而不是页面顶部的位置。

来源

2012-01-03 01:53:00 Virendra

从你的问题来看，这并不完全清楚，但你是否试图让它们垂直不同高度？如果是这样，将尝试将

vertical-align:top;加到marginTop1和marginTop2类中，因此margin-top值将产生可见效果。

来源

2012-01-03 00:44:13 nycdan

问题是第二个div是第一个div的相对位置而不是容器div或页面的顶部，它使用float：left解决，它使div相对于页面的顶部。 – palAlaa 2012-01-03 01:02:00

div的不同边距不起作用

回答

相关问题