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: 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;
}