Dreamweaver CSS margin-top 跟 top屬性不同

css：

#box1{
     border: 1px solid #F00;
    height: 50px;
}
#box2{
    border: 1px solid #00F;
    height: 25px;
}
 .sampo1{    
    margin-top :5px  // 會含最外框一起動

}
.samop2{
top: 5px;  //只動裏面的框框
} 
============================================================ 
html：
<div id="box1 ">
    <div id="box2 sampo1">
    </div>
</div>
 
<div id="box1 ">
<div id="box2 sampo2">
</div>
</div>