CSS: Top vs Margin-top

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Пример:

HTML:

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

CSS

#some_element {margin-top: 50%}

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

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

#some_element {top: 50%}

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

Ура!

Ответ 4

из байтов:

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

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

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

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

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

Ответ 5

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