Different margin of divions are not working
I want to make circles using division and each circle has different margin, the problem is that the div with small margin-top affects with the largest margin top for another div

here's the HTMl

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

and here's the 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
     } 

here's the code
http://jsfiddle.net/L6gPd/
the div with samll margin-top affects with large margin top!! any explanation please?
Different margin of divions are not working
===

I want to make circles using division and each circle has different margin, the problem is that the div with small margin-top affects with the largest margin top for another div

here's the HTMl

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

and here's the 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
     } 

here's the code
http://jsfiddle.net/L6gPd/
the div with samll margin-top affects with large margin top!! any explanation please?