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


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

Властивість `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>.

Нотатка:

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

Синтакс

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

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

length

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

auto

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

initial

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

inherit

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

Значення без задання: 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.marginBottom="100px"

Переглядачі

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

1.0

6.0

1.0

1.0

3.5

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

1.0

1.0

1.0

Приклади


Динамічний приклад

Демонстрація роботи властивості

Приклад задання відступів для елементів div.

Відступ знизу буде 2см.

p {
    margin-bottom: 2cm;
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів