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> | <percentage> | 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.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Отображениевизуальный
Обработка значенияпроцент, как указан, или аблосютная длина
Animation typeдлина
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
margin-bottomChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android ?
autoChrome Полная поддержка 1Edge Полная поддержка 12
Замечания
Полная поддержка 12
Замечания
Замечания The auto value is not supported in quirks mode.
Firefox Полная поддержка 1IE Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания The auto value is not supported in quirks mode.
Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 1Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.