Css: Top VS Margin-Top

CSS: Top vs Margin-top

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.

Usage of top and negative margin-top in css

Margin describes the space between your box and adjacent boxes. Setting a negative top margin indicates that you want negative spacing above your block. In simple words, margin to control the spacing between neighboring boxes and positive top-margin pushes content down, a negative top-margin pulls content up.

top and left on the other hand are positional attributes that specify where your box is located. The top left bottom right attributes specify the location of the respective edge of your box including its margin.

if you wanted the element to have no effect on the surrounding elements, you'd use top left bottom right

Check here for more info:

link

Margin-top or Padding-top or top?

That is not an error. You can use either margin or padding depending on what you want to achieve.

I think of margin as affecting the space after the border and padding affects space within the border.

Margin can be used to place the parent element since it can have negative values while padding is more of placing the element within the border and cannot have negative values.

Top is usually used to place the element in relation to the parent e.g. having style position of relative or absolute. It can also have negative values.

margin-top according to MDN web docs

padding-top according to MDN web docs

top according to MDN web docs

Top & Left vs margin-top & margin-left

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.

Is there any difference between 'margin-top, -left, -bottom, -right' and 'top, left, bottom, right' properties when element is positioned absolutely?

Yes there is a difference related to the static position. Here is a simple example to illustrate:

.box {
  position: relative;
  border: 2px solid green;
  width: 200px;
  position: relative;
  display: inline-block;
}

.box>div {
  height: 50px;
  width: 50px;
  background: red;
}

<div class="box">
  <h1>I am static</h1>
  <div></div>
</div>

<div class="box">
  <h1>I am static</h1>
  <div style="position:absolute;margin-top:20px;"></div>
</div>

<div class="box">
  <h1>I am static</h1>
  <div style="position:absolute;top:20px;"></div>
</div>

margin-block-start = margin-top
margin-block-end = margin-bottom
margin-inline-start = margin-left
margin-inline-end = margin-right

.margin {
  margin-top:50px;
  margin-bottom:10px;
  margin-left:100px;
  margin-right:200px;
}

.margin-alt {
  margin-block-start:50px;
  margin-block-end:10px;
  margin-inline-start:100px; 
  margin-inline-end:200px; 
}

div {
  border:2px solid;
  padding:20px;
}

<div class="margin">
A
</div>
<hr>
<div class="margin-alt">
A
</div>