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的不同邊距不起作用

回答

相關問題