margin
Оновлено: 05.12.2022
margin
Встановлює величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).
Якщо в елемента немає батьківського елемента, відступом буде відстань від краю елемента до краю вікна браузера з урахуванням того, що в самого вікна за замовчуванням теж встановлені відступи. Щоб їх позбутися, слід встановлювати значення margin для селектора <body> рівне нулю.
Властивість margin дає змогу задати величину відступу одразу для всіх боків елемента або визначити її тільки для зазначених боків.
Коротка інформація
| Значение по умолчанию | 0 |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
margin: [<розмір> | <відсотки> | auto] {1,4}
Значення
Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх між собою пробілом. Ефект залежить від кількості значень і наведений у табл. 1.
Табл. 1. Залежність від кількості значень
| Число значень | Результат |
| 1 | Відступи будуть встановлені одночасно від кожного краю елемента. |
| 2 | Перше значення встановлює відступ від верхнього і нижнього країв, друге - від лівого і правого |
| 3 | Перше значення задає відступ від верхнього краю, друге - одночасно від лівого і правого країв, а третє - від нижнього краю. |
| 4 | По черзі встановлюється відступ від верхнього, правого, нижнього і лівого краю. |
Величину відступів можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, так і негативним числом.
| auto | Вказує, що розмір відступів буде автоматично розрахований браузером. |
Приклад
Об'єктна модель
Об'єкт.style.margin
Примітка
Internet Explorer до версії 7 у режимі сумісності (quirk mode) не підтримує вирівнювання блоку по центру за допомогою правила margin: 0 auto. Також у цьому браузері спостерігається помилка з подвоєнням значення лівого або правого відступу для плаваючих елементів, вкладених у батьківські елементи. Подвоюється той відступ, який прилягає до сторони батьківського елемента. Проблема зазвичай вирішується додаванням display: inline для плаваючого елемента.
У блокових елементів, розташованих поруч один з одним по вертикалі, спостерігається ефект стискання, коли відступи не підсумовуються, а об'єднуються між собою. Саме стискання діє на два і більше блоків (один може бути вкладений всередину іншого) з відступами зверху або знизу, водночас прилеглі відступи комбінуються в один. Для відступів ліворуч і праворуч стискання ніколи не застосовується.
Стискання не спрацьовує:
- для елементів, у яких на стороні стискання задано властивість padding.
- для елементів, у яких на стороні стискання задано межу
- на елементах з абсолютним позиціонуванням, тобто таких, у яких position встановлено як absolute;
- на плаваючих елементах (для них властивість float задано як left або right);
- для рядкових елементів;
- для <html>.