CSS: Top vs Margin-top

Question

I\'m not sure if I fully understand the difference between these two.

Can someone explain why I would use one over the other and how they differ?

Answer 1

from bytes:

"Margin is that space between the edge of an element's box and the edge of the complete box, such as the margin of a letter. 'top' displaces the element's margin edge from the containing blocks box, such as that same piece of paper inside a cardboard box, but it is not up against the edge of the container."

My understanding is that margin-top creates a margin on the element, and top sets the top edge of the element below the top edge of the containing element at the offset.

you can try it here:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

just replace top with margin-top to see the difference.