Difference between margin and padding in CSS

This example may explain better difference between margin and padding:
             <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
.white_detail{
       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 padding-top: 10px;
.white_detail{
       padding-top: 10px;
       border: 1px solid red;
   }
   We can see the effect: the height  of red box (.white_detail) increased  10px, while 0px  distance from top of green box (..sessionTitle), and the position of text "Tablet computer" remains the same.

If we remove  border: 1px solid red;  in .white_detail class, margin-top: 10px; and padding-top: 10px; show the effect in this case.