margin-top

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

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

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

margin-top: 1em;

margin-top: 10%;

margin-top: 10px;

margin-top: 0;

<section>  <div>    <div></div>    <div></div>    <div></div>  </div></section>

#container {  width: 300px;  height: 200px;  display: flex;  align-content: flex-start;  flex-direction: column;  justify-content: flex-start;}.row {  height: 33.33%;  display: inline-block;  border: solid #ce7777 10px;  background-color: #2b3a55;  flex-shrink: 0;}#example-element {  border: solid 10px #ffbf00;  background-color: #2b3a55;}

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

Синтаксис

css

/* Ключевые слова */margin-top: auto;/* Значения длины */margin-top: 10px; /* абсолютное значение */margin-top: 1em; /* относительно размера текста */margin-top: 5%; /* относительно ширины ближайшего контейнера *//* Глобальные значения */margin-top: inherit;margin-top: initial;margin-top: unset;

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

Значения

<length>: Значение margin является фиксированной величиной
<percentage>: Значение margin выражается в процентах по отношению кширине блока, содержащего элемент.
auto: Браузер выбирает подходящее значение для использования. Смотриmargin.

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

margin-top =
<length-percentage>|
auto|
<anchor-size()>

<length-percentage> =
<length>|
<percentage>

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

Примеры

css

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

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

Specification
CSS Box Model Module Level 3 # margin-physical

Начальное значение	`0`
Применяется к	все элементы, кроме элементов с табличным типом`display`, отличным от`table-caption`,`table` и`inline-table`. Это также применяется к`::first-letter`.
Наследуется	нет
Проценты	ссылается на ширину содержащего блока
Обработка значения	процент, как указан, или абсолютная длина
Animation type	длина