Different between top and margin-top in CSS.

Difference between top and margin-top?

top property in CSS combing with position property measures the top position without considering nearby elements.
 margin-top property is to measure the top position of the element to its parent element.
This example may explain the difference between top and margin-top:
        <h1>CSS top  position</h1>
             <div class="sessionTitle">
                <img src="http://www3.telus.net/jianlu58/white_plus.gif" />
                <div class="white_detail">
                Tablet computer
                </div>
  When we used  margin-top: 10px; for .white_detail class and use position: absolute
.white_detail{
      position: absolute;
       margin-top: 10px;
       border: 1px solid red;
   }
 We can see the effect: the top of red box (.white_detail) has  10px distance from top of green box (..sessionTitle)

If we changed margin-top: 10px; to top: 10px;
.white_detail{
      position: absolute;
       top: 10px;
       border: 1px solid red;
   }
   We can see the effect: the top of red box (.white_detail)moved to the top of the page and ignore the position of its parent element.