why use margin-top instead of padding-top? is there a difference?

Hey there TzeYang,

Just to further add on this, there is a huge difference between Margin and padding. This article on W3schools shows a picture of the Box model. Using this as a reference, remember the following:

Lets say you have a DIV with the class "box" and in your CSS you give it the following properties:

.box {
  border: solid 2px red;
}

This box is going to have a solid 2px red border around it and we'll use this border as a reference point. Now, lets say you add a margin: 5px; to this rule. This Box you have will now have 5px of margin on the OUTSIDE of the border pushing it away from other content. If you were to add a padding: 5px to the rule instead, you would see the space between the content and its border increase by 5px.

In short, Padding increases /decreases the distance between the box's content and the border, and the Margin increases /decreases the space between the border, and other objects.

I hope this helps, don't forget to select a best answer to mark this question as resolved!

Cheers and Happy Coding!

-Jon