html - Top & Left vs margin-top & margin-left

Question

What is the difference between using top and left properties and top and left margins?

I know top and left are usually used in position:absolute situation but I'm still wondering if there is any major difference.

ex:

position:absolute;
top:5px;
left:5px;

-vs-

margin-top:5px;
margin-left:5px;

Answer 1

Well, the main difference is that absolutely positioned elements are pulled out of the content flow.

But also with relatively positioned elements, the surrounding content may become obfuscated.

Margins on the other hand are added to the element's size while the surrounding content flows accordingly.

See this sample fiddle with some differences.

Surely there are situations where both deliver the same results, but under normal conditions, these two aproaches aren't simply exchangeable nor comparable.