отличия использования позиционирования и margin

#css #position #margin

С того момента, как я узнал о позиционировании в css, для меня является загадкой
разница между отступами с помощью margin(1) и top\right\bottom\left(2).

В моём представлении, эти два атрибута делают одно и то же, и единственное их различие,
которое смог найти - это то, что (1) относится к box-model, когда (2) - нет.

Так же знаю о применении (2) для "относительности сторон", т.е. вещи вроде:

top: 0;
left: 0;


И тогда он будет "прибит" к левому верхнему краю.

Вопрос состоит в том, когда какой инструмент использовать?
    

Ответы

Ответ 1

Чтобы понять разницу, вам нужно попробовать поставить больше одного элемента:



.m {
  margin: 10px;
}

.r {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  position: relative;
}

div { height: 30px; width: 30px; border: 1px solid #999; display: inline-block; }
body{ font-size: 0;}
span{ font-size:15px;}
без отсупов:




margin:




 top/left:









Вы видите в примере, что margin создает настоящий отступ вокруг каждого элемента,
сдвигая соседние. 

top/left же просто сдвигает элементы вниз и влево, никак не влияя на верстку. Теоретически,
top/left больше похож на transform: translate, с отличием в аппаратном ускорении и
относительных еденицах


Ответ 2

Я всегда рисовал себе правила - на листике:

margin (внешний отступ) | padding (внутренний отступ): ↑ → ↓ ←;

Хорошо запоминается.
Есть случаи, когда margin не сможет исправить ситуацию отступа от рамки и текст внутри
рамки, будет казаться прилипшим, на помощь придет padding, который сделает внутренний
отступ от рамки элемента.