CSS: Top vs Margin-top

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

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

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

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% его содержащего элемента. В других словом, будет зазор между краями элемента и его контейнером.

Ура!

от Байт:

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

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

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

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

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

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