CSS-свойство margin-bottom определяет отступ от нижней части элемента. При положительном значении элемент будет отодвигать соседние элементы снизу, а при отрицательном – приближать.
Это свойство не воздействует на строковые элементы, типа <span> или <code>.
Синтаксис
margin-bottom: значение | auto | inherit
Значения
Величина верхнего отступа может быть задана в пикселях (px), процентах (%) или любых других допустимых единицах CSS, и может быть как положительным, так и отрицательным.
auto– размер отступа будет автоматически определен браузером;inherit– наследует значение предка.
Пример использования
В примере ниже установлен отступ в 10px.
.element {
margin-bottom: 10px;
}Отступ снизу для синего прямоугольника установлен в 20px.
See the Pen
margin top by Андрей (@adlibi)
on CodePen.
Почему свойство margin-bottom не работает
Свойство может не работать по следующим причинам:
- Из-за схлопывания прилегающих друг к другу верхнего и нижнего отступов. Подробнее о схлопывании можно прочитать здесь.
- Свойство не работает для строчных элементов типа
span. В этом случае следует задать для элемента свойствоinline-blockилиblock.