css властивість margin-bottom

CSS властивість margin-bottom встановлює відступ від нижнього краю елемента.

Відстань встановиться від нижнього краю поточного елемента до внутрішнього краю батьківського елемента.

Властивість може отримувати в якості значення, як довжину так і відсотки та ключове слово auto. Значення може бути від'ємне. У цьому випадку елементу буде розташований ближче до сусідніх елементів.

Зона для margin знаходиться поза межами (border), які в свою чергу знаходяться поза полями (padding).

Негативні margin-right / bottom поводяться по-іншому, ніж margin-left / top. Вони не зрушують елемент, а «вкорочують» його. Тобто, хоча сам розмір блоку не зменшується, але наступний елемент буде думати, що він менше на вказане в margin-right / bottom значення. Наприклад, в прикладі нижче другий рядок налазить на першу:

<div style="border: 1px solid blue; margin-bottom: -0.5em">
  Перший
</div>

<div style="border: 1px solid red">
  Другий div думає, що висота першого на 0.5em менше
</div>

правити

Нотатка

Властивість margin-bottom не впливає на такі елементи як <tt> та <span>.

автор: Svitlana правити

Нотатка

Вертикальні відступи двох елементів можуть об'єднуватися.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість margin-bottom може отримувати 4 значень:

length

Величину нижнього відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути додотнім та від'ємним числом.

автор: Svitlana

правити

auto

Розмір відступів буде автоматично розрахований браузером.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
margin-bottom	1.0	1.0	1.0	3.5	6.0

Підтримка: мобільні переглядачі

Переглядач
margin-bottom	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="m">Під цим абзацом — відступ 2 сантиметри.</p>
<p>Наступний абзац відсунувся вниз.</p>

p {
    border: 1px solid #0172ad;
    margin: 0;
    padding: 6px;
}

.m {
    margin-bottom: 2cm;
}