Важно знать! Если вы работаете с устаревшими браузерами, имейте в виду: значение "inherit" не поддерживается в IE8 и более ранних версиях.

Свойство CSS margin-top - это ваш инструмент для управления внешними отступами сверху. По сути, оно определяет расстояние от верхней границы вашего элемента до внутренней границы родителя или соседнего блока. Однако будьте внимательны: для строчных элементов (inline) разрешено устанавливать только левые и правые внешние отступы.

Вы можете задавать размер верхнего внешнего отступа в пикселях (px), процентах (%) или других единицах. И что особенно интересно - значение может быть как положительным, так и отрицательным!

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

Объединение полей

1. Когда сестринские элементы находятся друг под другом в потоке документа, их поля «сливаются» в одно общее. Итоговая высота такого поля будет равна высоте большего из двух исходных полей (например: поле верхнего элемента () составляет 10px, а нижнего элемента (margin-top) - 20px, единое поле в этом случае будет высотой 20px).
2. Объединение может произойти и между родительским и дочерним элементами, но только если у родителя нет ничего, что могло бы визуально или структурно отделить их внешние отступы (будь то рамки, внутренний отступ padding или строчное содержимое).

Синтаксис и значения свойства

margin-top: auto|размер|inherit;