margin-bottom

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

                        Влияние CSS свойства margin-bottom на блок элемента

Это свойство не имеет воздействия на незамещаемые элементы, такие как <span> или <code>.

Синтаксис

/* числовые значения */
margin-bottom: 10px;  /* Абсолютная длина */
margin-bottom: 1em;   /* относительно размера текста */
margin-bottom: 5%;    /* относительно длины родительского блока */

/* Значения-ключевые слова */
margin-bottom: auto;

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

Свойство margin-bottom может быть выражено как ключевое слово auto, или как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

Значения

<length>
Размер отступа - фиксированная величина.
<percentage>
Размер отступа в процентах - размер относительно длины родительского блока.
auto
Браузер сам выбирает, какое значение использовать. Смотрите margin.

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

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

Пример

HTML

<div class="container">
<div class="box0">Блок 0</div>
<div class="box1">Блок 1</div>
<div class="box2">Отрицательное значение margin Блока 1 тянет меня вверх</div>
</div>

CSS

CSS устанавливает нижний отступ и высоту для элементов div.

.box0 {
    margin-bottom:1em;
    height:3em;
}
.box1 {
    margin-bottom:-1.5em;
    height:4em;
}
.box2 {
    border:1px dashed black;
    border-width:1px 0;
    margin-bottom:2em;
}

Несколько дополнений к свойствам элемента div и элемента класса container сделают более наглядным эффект использования свойства margin.

.container {
    background-color:orange;
    width:320px;
    border:1px solid black;
}
div {
    width:320px;
    background-color:gold;
}

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

Спецификация Статус Комментарий
CSS Basic Box Model
Определение 'margin-bottom' в этой спецификации.
Кандидат в рекомендации Нет значительных изменений
CSS Transitions
Определение 'margin-bottom' в этой спецификации.
Рабочий черновик Определяет margin-bottom как анимируемое.
CSS Level 2 (Revision 1)
Определение 'margin-bottom' в этой спецификации.
Рекомендация Убирает влияние свойства на строчные элементы.
CSS Level 1
Определение 'margin-bottom' в этой спецификации.
Рекомендация Первоначальное определение

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

Поддержка браузерами

BCD tables only load in the browser