Я не уверен, что полностью понимаю разницу между этими двумя.
Может ли кто-нибудь объяснить, почему я бы использовал одно вместо другого и чем они отличаются?
topпредназначен для настройки элемента с использованием positionсвойства.
margin-topпредназначен для измерения внешнего расстояния до элемента по отношению к предыдущему.
Кроме того, topповедение может отличаться в зависимости от типа должности absolute, relativeили fixed.
Вы должны использовать маржу, если хотите переместить элемент (блок) подальше от других элементов в потоке документов. Это означает, что следующие элементы будут отодвинуты / дальше вниз. Имейте в виду, что вертикальные поля соседних элементов блока сжимаются.
Если вы хотите , элемент не оказывает никакого влияния на окружающих элементов, вы будете использовать позиционирование (абс., Отн.) И top, bottom, leftи rightнастройки.
При relativeпозиционировании элемент по-прежнему будет занимать исходное пространство, как при статическом позиционировании. Вот почему ничего не происходит, если вы просто переключаетесь из положения staticв relativeположение. Оттуда вы можете протолкнуть его через окружающие элементы.
С помощью absoluteпозиционирования вы полностью удаляете элемент из (статического) потока документов, поэтому он освобождает занимаемое пространство. Затем вы можете расположить его свободно - но относительно следующего лучшего нестатически позиционированного элемента, обернутого вокруг него. Если его нет, он будет привязан ко всей странице.
Margin применяет и расширяет / сжимает нормальную границу элемента, но когда вы вызываете top, вы игнорируете обычное положение элемента и перемещаете его в определенную позицию.
Пример:
html:
<div id="some_element">content</div>
css:
#some_element {margin-top: 50%}
Означает, что элемент начнет отображать html на высоте 50% своего контейнера (т. Е. Div, отображающий слово «контент», будет отображаться на высоте 50% от содержащего его узла div или html непосредственно перед div # some_element), но если вы откроете свой в инспекторе браузера (f12 в Windows или cmd + alt + i в Mac) и наведя курсор мыши на элемент, вы увидите, что его границы выделены, и заметите, что элемент был сдвинут вниз, а не перемещен.
Вверху с другой стороны:
#some_element {top: 50%}
Фактически изменит положение элемента, что означает, что он по-прежнему будет отображаться на 50% своего контейнера, но он будет перемещать элемент так, чтобы его край начинался с 50% содержащего его элемента. Другими словами, между краями элемента и его контейнером будет промежуток.
Ура!
topСвойство является свойством позиции. Он используется со positionсвойством, например absoluteили relative. margin-top- собственное свойство элемента.
из байтов:
"Поле - это расстояние между краем блока элемента и краем всего блока, например, поле буквы. 'Top' смещает край поля элемента от блока содержащих его блоков, например того же листа бумаги внутри картонная коробка, но не упираясь в край контейнера ".
Насколько я понимаю, margin-top создает поле для элемента, а top устанавливает верхний край элемента ниже верхнего края содержащего элемента при смещении.
вы можете попробовать это здесь:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
просто замените top на margin-top, чтобы увидеть разницу.