Свойство 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">Box 0</div>
<div class="box1">Box 1</div>
<div class="box2">Box one's negative margin pulls me up</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;
}

Specifications

Specification Status Comment
CSS Basic Box Model
Определение 'margin-bottom' в этой спецификации.
Рабочий черновик No significant change
CSS Transitions
Определение 'margin-bottom' в этой спецификации.
Рабочий черновик Defines margin-bottom as animatable.
CSS Level 2 (Revision 1)
Определение 'margin-bottom' в этой спецификации.
Рекомендация Removes its effect on inline elements.
CSS Level 1
Определение 'margin-bottom' в этой спецификации.
Рекомендация Initial definition

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

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 6Safari iOS Полная поддержка 1Samsung Internet Android ?
autoChrome Полная поддержка 1Edge ? Firefox Полная поддержка 1IE Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания The auto value is not supported in quirks mode.
Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Полная поддержка 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

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

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: owlblinked, zeth75
Обновлялась последний раз: owlblinked,