margin-top

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

Интерактивный пример

Это свойство не имеет эффекта на незамещаемых (non-replaced) строковых (inline) элементах, таких как <span> или <code>.

Синтаксис

css

/* значения <length> */
margin-top: 10px; /* абсолютное значение */
margin-top: 1em; /* относительно размера текста */
margin-top: 5%; /* относительно ширины ближайшего контейнера */

/* ключевые слова */
margin-top: auto;

/* глобальные значения */
margin-top: inherit;
margin-top: initial;
margin-top: unset;

Свойство margin-top может принимать значение auto, <length> или <percentage>. Эти значения могут быть положительные, отрицательные или равны нулю.

Значения

<length>

Значение margin является фиксированной величиной

<percentage>

Значение margin выражается в процентах по отношению к ширине блока, содержащего элемент.

auto

Браузер выбирает подходящее значение для использования. Смотри margin.

Формальный синтаксис

margin-top = 
<length-percentage> | (en-US)
auto

<length-percentage> =
<length> | (en-US)
<percentage>

Примеры

css

.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}

Спецификации

Specification Status Comment
CSS Box Model
Определение 'margin-top' в этой спецификации.
Кандидат в рекомендации Никаких существенных изменений
CSS Transitions
Определение 'margin-top' в этой спецификации.
Рабочий черновик Определяет margin-top как анимационный.
CSS Level 2 (Revision 1)
Определение 'margin-top' в этой спецификации.
Рекомендация Устраняет его влияние на строковые (inline) элементы.
CSS Level 1
Определение 'margin-top' в этой спецификации.
Рекомендация Начальное определение
Начальное значение0
Применяется квсе элементы, кроме элементов с табличным типом display, отличным от table-caption, table и inline-table. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияпроцент, как указан, или абсолютная длина
Animation typeдлина

Совместимость с браузерами

BCD tables only load in the browser