margin
Скорочення CSS margin
(берег) задає область зовнішніх відступів з усіх чотирьох боків елемента.
Спробуйте його в дії
Складові властивості
Ця властивість є скороченням наступних властивостей CSS:
Синтаксис
/* Застосовується до всіх чотирьох боків */
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>
.
Горизонтальне центрування
Центрувати елемент за горизонталлю в межах його батьківського елемента можна, задавши йому margin: 0 auto;
.
Поширеніший метод центрування елемента за горизонталлю – задання контейнеру display: flex;
і justify-content: center;
, у такий спосіб центруючи його гнучкі дочірні елементи.
Стягування зовнішніх відступів
Верхній та нижній зовнішні відступи елементів іноді стягуються в один відступ, рівний більшому з двох відступів. Більше подробиць – у розділі Опанування явища складання берегів.
Формальне визначення
Початкове значення | так як і всі інші властивості зі скорочення:
|
---|---|
Успадковується | ні |
Обчислене значення | так як і всі інші властивості зі скорочення:
|
Формальний синтаксис
[ <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 відступу */
/* Рамки відцентровані по горизонталі */
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
margin
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 3 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
auto
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 1 | Samsung Internet Full support 1.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