margin

Скорочення CSS margin (берег) задає область зовнішніх відступів з усіх чотирьох боків елемента.

Спробуйте його в дії

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

Ця властивість є скороченням наступних властивостей CSS:

• margin-top
• margin-right
• margin-bottom
• margin-left

Синтаксис

/* Застосовується до всіх чотирьох боків */
margin: 1em;
margin: -3px;

/* згори та знизу | зліва та справа */
margin: 5% auto;

/* згори | зліва та справа | знизу */
margin: 1em auto 2em;

/* згори | справа | знизу | знизу */
margin: 2px 1em 0 auto;

/* Глобальні значення */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

Властивість margin може бути задана з одним, двома, трьома чи чотирма значеннями. Кожне значення – це <length>, <percentage> або ключове слово auto. Від'ємні значення притягують елемент ближче до сусідів, ніж було б усталено.

• Коли задано одне значення, то воно застосовується до усіх чотирьох сторін.
• Коли задано два значення, то перший відступ застосовується згори та знизу, а другий – зліва і справа.
• Коли задано три значення, то перший відступ застосовується згори, другий – справа і зліва, а третій – знизу.
• Коли задано чотири значення, то ці відступи застосовуються згори, справа, знизу і зліва – в такому порядку (за годинниковою стрілкою).

Значення

length

Розмір зовнішнього поля як фіксоване значення.

percentage

Розмір зовнішнього поля як відсоткове значення, відносне щодо рядкового розміру (ширини для горизонтальної мови, визначеної writing-mode) контейнерного блока.

auto

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

Опис

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

Верхній та нижній зовнішні відступи не мають дії на незаміщених рядкових елементах, як то <span> чи <code>.

Горизонтальне центрування

Аби центрувати щось по горизонталі, в сучасних браузерах можна застосувати display: flex; justify-content: center;.

Проте в старих браузерах, як то IE 8 чи 9, що не підтримують Компонування гнучкого блока, описаний вище підхід не доступний. Аби центрувати елемент всередині свого предка, там слід застосовувати margin: 0 auto;.

Стягування зовнішніх відступів

Верхній та нижній зовнішні відступи елементів іноді стягуються в один відступ, рівний більшому з двох відступів. Більше подробиць – у розділі Опанування явища складання берегів.

Формальне визначення

Формальний синтаксис

[ <length> | <percentage> | auto ]{1,4}

Приклади

Простий приклад

HTML

<div class="center">Цей елемент центровано.</div>

<div class="outside">Цей елемент розташований поза своїм контейнером.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Більше прикладів

margin: 5%; /* Усі сторони: 5% відступу */

margin: 10px; /* Усі сторони: 10px відступу */

margin: 1.6em 20px; /* згори та знизу: 1.6em відступу */
/* зліва і справа: 20px відступу */

margin: 10px 3% -1em; /* згори:            10px відступу */
/* зліва і справаt: 3% відступу   */
/* знизу:         -1em відступу */

margin: 10px 3px 30px 5px; /* згори:    10px відступу */
/* справаt:  3px відступу  */
/* знизу: 30px відступу */
/* зліва:   5px відступу  */

margin: 2em auto; /* згори та знизу: 2em відступу   */
/* Рамки відцентровані по горизонталі */

margin: auto; /* згори та знизу: 0 відступу     */
/* Рамки відцентровані по горизонталі */

Специфікації

Сумісність із браузерами

Дивіться також

• Вступ до Базової рамкової моделі CSS
• Опанування явища складання берегів
• margin-top, margin-right, margin-bottom і margin-left
• Відповідні логічні властивості: margin-block-start, margin-block-end, margin-inline-start і margin-inline-end, а також скорочення margin-block і margin-inline