margin-top

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

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

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

Синтаксис

/* значения <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>

Примеры

.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