margin
Встановлює величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).
Якщо в елемента немає батьківського елемента, відступом буде відстань від краю елемента до краю вікна браузера з урахуванням того, що в самого вікна за замовчуванням теж встановлені відступи. Щоб їх позбутися, слід встановлювати значення margin для селектора <body> рівне нулю.
Властивість margin дає змогу задати величину відступу одразу для всіх боків елемента або визначити її тільки для зазначених боків.
📄 Коротка інформація
| Значение по умолчанию | 0 |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Так |
⌨️ Синтаксис
margin: [<розмір> | <відсотки> | auto] {1,4}
⚙️ Значення
Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх між собою пробілом. Ефект залежить від кількості значень і наведений у табл. 1.
Табл. 1. Залежність від кількості значень
| Число значень | Результат |
| 1 | Відступи будуть встановлені одночасно від кожного краю елемента. |
| 2 | Перше значення встановлює відступ від верхнього і нижнього країв, друге - від лівого і правого |
| 3 | Перше значення задає відступ від верхнього краю, друге - одночасно від лівого і правого країв, а третє - від нижнього краю. |
| 4 | По черзі встановлюється відступ від верхнього, правого, нижнього і лівого краю. |
Величину відступів можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, так і негативним числом.
| auto | Вказує, що розмір відступів буде автоматично розрахований браузером. |
📋 Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>margin</title>
<style>
body {
margin: 0; /* Remove padding */
}
.parent {
margin: 20% /* Padding around the element */
background: #e2edc1; /* Background color */
padding: 10px /* Margin around text */
}
.child {
border: 3px solid #333391; /* Frame options */
padding: 10px /* Margin around text */
margin: 10px /* Indentation */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
The collective unconscious, no matter how it seems
paradoxical, multifaceted continues neurotic
ontological status of art.
</div>
</div>
</body>
</html>