Разный край div's не работает

Question

Я хочу создать круги с использованием разделов, и каждый круг имеет разный запас. Проблема в том, что div с небольшим margin-top влияет на наибольший margin top для другого 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 влияет на большой край поля.

Любые объяснения пожалуйста?

Answer 1

Если вы хотите разместить их рядом друг с другом, добавьте float:left; в div.circle.

Если вы проверите элемент с помощью Firebug или инструментов разработчика Chrome, вы увидите, что 2-й круг имеет margin-top всего 20px, но он относится к позиции 1-го круга, а не к верхней части страницы.

Answer 2

Это не совсем ясно из вашего вопроса, но вы пытаетесь заставить их быть разными высотами по вертикали? Если это так, попробуйте добавить

vertical-align:top; к маркам marginTop1 и marginTop2, чтобы значения верхнего края приобрели видимый эффект.