CSS: Top vs Margin-top

Я не впевнений, що повністю розумію різницю між цими двома.

Хтось може пояснити, чому я вживаю одне над іншим і чим вони відрізняються?

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

Крім того, topповедінка може відрізнятися залежно від типу посади absolute, relativeабо fixed.

Ви б використовували поле, якщо хочете перемістити елемент (блок) подалі від інших елементів у документообігу. Це означає, що це відштовхне наступні елементи геть / далі вниз. Майте на увазі, що вертикальні поля сусідніх елементів блоку руйнуються.

Якщо ви хочете , елемент не робить ніякого впливу на оточуючих елементів, ви будете використовувати позиціонування (абс., Від.) І top, bottom, leftі rightнастройки.

При relativeпозиціонуванні елемент все одно займе свій початковий простір, як при статичному розташуванні. Ось чому нічого не відбувається, якщо ви просто перейти від staticдо relativeпозиції. Звідти ви можете просунути його по довколишніх елементах.

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

Поле застосовує та розширює / скорочує нормальну межу елемента, але коли ви викликаєте 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, щоб побачити різницю.