Разница между margin и top,left,right,bottom
На примере ниже два блока, оба имеют одинаковый отступ от верхней границы в 40px. Отступ у одного блока был реализован при помощи CSS-margin-top, а у другого через CSS-top. Я не могу понять в чем разница между margin-top и просто top. Ведь результат один и тот же 40px.
let block = document.querySelector('#block1');
document.querySelector('#block2').style.marginLeft = block.getBoundingClientRect().right + 'px';
let texts = document.querySelectorAll('#text');
for(let go of texts){
go.style.marginLeft = Math.round(block.clientWidth / 2 - go.clientWidth / 2) +"px"
go.style.marginTop = Math.round(block.clientHeight / 2 - go.clientHeight / 2) +"px"
}#block1{
margin-top:40px;
margin-left: 50px;
background: orange;
position: relative;
height: 150px;
width: 300px;
}
#block2{
top:40px;
left: 25px;
background: coral;
position: absolute;
height: 150px;
width: 300px;
}
#text{
font-size: 20px;
color:black;
position:absolute;
}
#text[colors]{
color: white;
}<div id ="block1">
<div id="text">Margin-top 50px</div>
</div>
<div id ="block2">
<div id="text" colors>Top 50px</div>
</div>