С того момента, как я узнал о позиционировании в css, для меня является загадкой разница между отступами с помощью margin(1) и top
ight\bottom\left(2).
В моём представлении, эти два атрибута делают одно и то же, и единственное их различие, которое смог найти - это то, что (1) относится к box-model, когда (2) - нет.
Так же знаю о применении (2) для "относительности сторон", т.е. вещи вроде:
top: 0;
left: 0;
И тогда он будет "прибит" к левому верхнему краю.
Вопрос состоит в том, когда какой инструмент использовать?
Ответ
Чтобы понять разницу, вам нужно попробовать поставить больше одного элемента:
.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, с отличием в аппаратном ускорении и относительных еденицах
Комментариев нет:
Отправить комментарий