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?
top is for tweak an element with use of position property.
margin-top is for measuring the external distance to the element, in relation to the previous one.
Also, top behavior can differ depending on the type of position, absolute, relative or fixed.