CSS Margin Collapse - Згортання полів
Іноді два поля згортаються в одне поле.
Margin Collapse - Згортання полів
Верхнє і нижнє поля елементів іноді згортаються в одне поле, рівне найбільшому з двох полів.
Цього не відбувається з лівим і правим полями! Лише верхнє і нижнє поля!
Подивіться наступний приклад:
Приклад
Демонстрація згортання полів:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Спробуйте самі »
В наведеному вище прикладі елемент <h1> має нижнє поле 50 пікселів, а елемент <h2> має верхнє поле 20 пікселів.
Здоровий глузд підказує, що вертикальне поле між тегами <h1> та <h2> буде разом 70 пікселів (50 пікселів + 20 пікселів). Але із-за згортання полів фактичне поле складе 50 пікселів.
Перевірте себе за допомогою вправ!
Всі CSS властивості полів
| Властивість | Опис |
|---|---|
| margin | Скорочена властивість для встановлення властивостей полів в одній об’яві |
| margin-bottom | Встановлює нижнє поле елемента |
| margin-left | Встановлює ліве поле елемента |
| margin-right | Встановлює праве поле елемента |
| margin-top | Встановлює верхнє поле елемента |
