CSS: топ против маржи-топ

Question

Я не уверен, полностью ли я понимаю разницу между этими двумя.

Может кто-нибудь объяснить, почему я использовал один над другим и как они отличаются?

Answer 1

Вы бы использовали margin, если бы вы хотели отодвинуть (блокировать) элемент от других элементов в потоке документа.Это означает, что это оттолкнет / отодвинет следующие элементы.Помните, что вертикальные поля смежных элементов разрушаются.

Если вы хотите, чтобы элемент не влиял на окружающие элементы, вы бы использовали позиционирование (абс., ​​Отн.) И top, bottom, left и right.

При позиционировании relative элемент все равно будет занимать свое первоначальное пространство, как при статическом позиционировании.Вот почему ничего не происходит, если вы просто переключаетесь из положения static в relative.Оттуда вы можете затем протолкнуть его через окружающие элементы.

При позиционировании absolute вы полностью удалите элемент из (статического) потока документов, чтобы освободить занимаемое им пространство.Затем вы можете расположить его свободно - но относительно к следующему лучшему нестатически позиционированному элементу, обернутому вокруг него.Если его нет, он будет привязан ко всей странице.

Answer 2

top - для настройки элемента с использованием свойства position.
margin-top предназначен для измерения внешнего расстояния до элемента по отношению к предыдущему.

Кроме того, поведение top может отличаться в зависимости от типа позиции: absolute, relative или fixed.

Answer 3

Маржа применяется и расширяет / сжимает нормальную границу элемента, но когда вы вызываете top, вы игнорируете обычную позицию элемента и перемещаете его в определенную позицию.

Пример:

html:

<div id="some_element">content</div>

css:

#some_element {margin-top: 50%}

Означает, что элемент начнет отображать html на высоте 50% своего контейнера (т. Е. Div, отображающий слово «content», будет отображаться при 50%).высота содержащего его узла div или html непосредственно перед div # some_element), но если вы откроете инспектор вашего браузера (f12 для Windows или cmd + alt + i на mac) и наведете указатель мыши на элемент, вы увидите, что его границы выделены, и обратите внимание, что элемент имеетбыл сдвинут вниз, а не перемещен.

Верх с другой стороны:

#some_element {top: 50%}

Фактически переместит элемент, означающий, что он все равно будет отображаться на 50% его контейнера, но он будет переставленэлемент, так что его край начинается на 50% от содержащего его элемента.Другими словами, между краями элемента и его контейнером будет зазор.

Cheers!

Answer 4

Свойство top является свойством позиции. Он используется со свойством position, таким как absolute или relative. margin-top является собственным свойством элемента.

Answer 5

from bytes:

"Поле - это пространство между краем ящика элемента и краем целого ящика, например полем буквы. 'Top' смещает край поля элемента изсодержащий коробку с блоками, например, тот же лист бумаги внутри картонной коробки, но он не вплотную к краю контейнера. "

Насколько я понимаю, поле margin-top создает поле для элемента, иtop устанавливает верхний край элемента ниже верхнего края содержащего элемента со смещением.

вы можете попробовать это здесь:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

просто замените topс полем сверху, чтобы увидеть разницу.

Answer 6

Мне было интересно то же самое. Я создал Codepen , если кто-то хотел поиграть с ним.

CSS:

.container {
    margin-top: -70px;
}


.category {
    top: -12px;
    position: absolute;
}