What is the difference between top and margin- top please explain with example

Question

Problem

Answer 1

'top' is used together with 'position'. Example:
CSS:
div{
position:absolute;
top:10px;
left:10px;
}
HTML:
<h1> paragraph </h1>
<div> div tag </div>
It positions the element 10px from top and 10px from left of the browser window . Overlapping the <h1> element.

margin-top adds margin to the top of an element:
div{
margin-top:10px;
}
this one adds 10px of space at the top of div and remains below the <h1> tag.

Answer 2

Please see questions care fully Thomas and tobias

Answer 3

from my perseption, top is position property, while margin-top is own element property