Властивість CSS margin: зовнішні відступи елементів

Властивість CSS margin: зовнішні відступи елементів

Властивість CSS margin керує зовнішніми відступами елемента. За його допомогою можна встановити відстань між сусідніми блоками або відсунути дочірній вузол від межі батьківського. Маргіни не беруть участі в блочній моделі CSS і не входять в ширину і висоту елемента.

Синтаксис властивості

Існує загальна властивість CSS margin, за допомогою якої можна вказати значення відразу всіх відступів, а також чотири окремі властивості для кожної сторони:


  • margin-left;
  • margin-right;
  • margin-top;
  • margin-bottom.

Ви можете визначити відступ у пікселях, відносних одиницях (em, rem) або відсотках. В останньому випадку за 100% завжди буде прийнята ширина батьківського елемента, навіть для верхньої і нижньої сторони.

parent {
  width: 500px;
  height: 100px;
}
child {
  margin-left: 10%; // 500px * 10% = 50px
  margin-top: 10%; // 500px * 10% = 50px
}

У CSS margin може бути негативним.

При використанні групового синтаксису необхідно передати від одного до чотирьох параметрів, перераховуючи сторони в правильному порядку.

  • Один: для всіх сторін відразу.
  • Два: для верху і низу і окремо для бокових сторін.
  • Три: для верху, боків і низу.
  • Чотири: перерахування сторін за годинниковою стрілкою, починаючи з верхньої.

element {
 margin: 20px;
}
element {
 margin: 20px 30px;
}
element {
 margin: 20px 30px 40px;
}
element {
 margin: 20px 30px 40px 50px;
}

Алгоритми обчислення відступів


Властивість CSS margin не успадковується і типово дорівнює нулю. Здавалося б, спочатку жоден елемент на сторінці не повинен мати зовнішніх відступів, але це не так. Переглядачі з власної ініціативи встановлюють форматування для низки тегів, наприклад, списків. Важливо враховувати це при верстці.

Специфікація визначає особливості поведінки маргінів для вузлів з різним типом відображення. Так, рядкові елементи ігнорують значення верхнього і нижнього відступу, навіть якщо вони прямо вказані, щоб не порушувати структуру рядка.

Блоки і рядкові блоки адекватно відображають маргіни з усіх чотирьох сторін, проте в рядку випадків поведінка цієї властивості може виявитися несподіваною.

Схлопування маргінів

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

Блокові елементи в CSS ведуть себе за першим типом, а рядково-блочні і флекс-контейнери - за другим. При цьому схлопуються тільки вертикальні відступи, горизонтальні ж завжди складаються.

Винос маргіна за межі батька

Є у блочних вузлів ще одна причуда: у ряді випадків маргін дочірнього елемента може виноситися за межі батьківського контейнера. Це відбувається, якщо елемент нічим не відокремлений від межі предка - ні іншими елементами, ні текстовим вузлом, ні рамкою, ні паддингом.

На картинці зображено дочірній блок, якому було задано порожній у розрахунку на те, що він відсунеться від верхньої межі батьківського контейнера. Замість цього маргін був винесений за межі батька і відсунув його від кордону більш старшого предка.


Якщо батько має рамку, паддінг або властивість overflow, рівне hidden або scroll, винос маргіна не відбувається.

Вирівнювання за центром

Існує відомий трюк, що дозволяє вирівняти блочний елемент по центру батька за допомогою зовнішніх відступів. Для цього необхідно задати ширину і встановити для лівого і правого маргінів значення auto.

element {
 width: 400px;
 margin: 0 auto;
}

При цьому відбувається перерозподіл вільного простору порівну з обох сторін від елемента. Це працює тільки для вузлів блочного типу з конкретно визначеною шириною. Якщо не встановити розмір, блоковий елемент розтягнеться на весь контейнер, не залишаючи вільного місця для відступів.