divの余白が異なっています

Question

私は部門を使って円を作りたいと思い、それぞれの円は異なるマージンを持っています。問題は、margin-topの小さいdivが、別のdivの最大のmargin topに影響を与えることです。ここ

は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/

margin-topの小さいdivは大きなマージンのトップに影響します。

何か説明してください。

Answer 1

これらを並べて配置する場合は、float:left;をdiv.circleに追加します。

FirebugまたはChromeデベロッパーツールを使用して要素を検査すると、margin-topが20pxの2番目の円であることがわかりますが、ページの上部からではなく1番目の円の位置からの相対です。

Answer 2

あなたの質問から完全にはっきりしていませんが、それらを垂直に異なる高さにしようとしていますか？その場合は、marginTop1とmarginTop2クラスに

vertical-align:top;を追加して余白の上限値が表示されるようにします。