CSS свойство margin-bottom

Свойство margin-bottom используется для установления нижнего поля элемента.

Отрицательные значения допустимы.
Если использованы незаменяемые строчные элементы (например, <tt> или <span>), CSS свойство margin-bottom не будет иметь эффекта.
Значение по умолчанию 0
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Да. Нижнее поле элемента анимируемо.
Версия CSS2
DOM синтаксис object.style.marginBottom = "70px";

Синтаксис

margin-bottom: length | auto | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .bottom { margin-bottom: 100px;}
    </style>
  </head>
  <body>
    <h2>Пример свойства margin-bottom</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p class="bottom">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>

Рассмотрим другой пример, где значение нижнего поля равно "4em":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .bottom { margin-bottom: 4em;}
    </style>
  </head>
  <body>
    <h2>Пример свойства margin-bottom</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p class="bottom">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне..</p>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>

В следующем примере нижнее поле указано в "em", "px" и "%" для показа разницы между ними:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.p1 {
      margin-bottom: 5em;
      }
      p.p2 {
      margin-bottom: 20%;
      }
      p.p3 {
      margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства margin-bottom</h2>
    <p>Параграф без полей.</p>
    <p class="p1">Значение нижнего поля равно 5em.</p>
    <p class="p2">Значение нижнего поля равно 20%.</p>
    <p class="p3">Значение нижнего поля равно 20px.</p>
    <p>Параграф без полей.</p>
  </body>
</html>

Значения

Значение Описание
auto Устанавливает нижнее поле. Значение по умолчанию.
length Устанавливает нижнее поле в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию - 0.
% Устанавливает нижнее поле элемента в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Что из этого может быть значением свойства CSS margin-bottom?
Считаете ли это полезным?