I am aware about the concept of 'margin-collapse'. But , why am I not able to see 10 px margin on the top of the first box [**here**](http://jsfiddle.net/2f4Kz/1/). The top box(which has the id 'first') should have 10px margin above it. If this is not the correct wat to get it, then what is it? And, why this doesn't work.

CSS:

```
#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;  
}

.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}

```

HTML:

```
<div id="Main"> 
    <div id="first" class="box"></div>
    <div id="second" class="box"></div>
    <div id="third" class="box"></div>
</div>

```

I know one way could be that we can give 10px padding to the parent div. But then why doesn't this thing work?