Monday, September 16, 2013

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="" />
                <div class="white_detail">
                Tablet computer

  When we used  margin-top: 10px; for .white_detail class and use position: absolute
      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;
      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.

No comments:

Post a Comment