CSS-свойство margin-top определяет отступ верхней части элемента. При положительном значении элемент будет располагаться дальше от соседних элементов сверху, а при отрицательном – ближе.
Это свойство не воздействует на строковые элементы, типа <span> или <code>.
Синтаксис
margin-top: значение | auto | inherit
Значения
Величина верхнего отступа может быть задана в пикселях (px), процентах (%) или любых других допустимых единицах CSS, и может быть как положительным, так и отрицательным.
auto– размер отступа будет автоматически определен браузером;inherit– наследует значение предка.
Пример использования
В примере ниже установлен отступ в 20px.
.element {
margin-top: 20px;
}Отступ сверху для красного прямоугольника установлен в 50px.
See the Pen
margin auto by Андрей (@adlibi)
on CodePen.
Почему свойство margin-top не работает
Свойство может не работать по следующим причинам:
- Из-за схлопывания прилегающих друг к другу верхнего и нижнего отступов. Подробнее о схлопывании можно прочитать здесь.
- Свойство не работает для строчных элементов типа
span. В этом случае нужно задать для элемента свойствоinline-blockилиblock.