HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут margin в CSS

Атрибут margin в CSS

1420

Встановлює величину відступу кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішнього кордону його батьківського елемента (рис. 1).

Відступ від лівого краю елемента

Мал. 1. Відступ від лівого краю елемента

Якщо елемент не має батька, відступом буде відстань від краю елемента до краю вікна браузера з урахуванням того, що біля самого вікна за замовчуванням також встановлені відступи. Щоб їх позбутися, слід встановлювати значення margin для селектора <body> рівне нулю.

Властивість margin дозволяє задати величину відступу відразу для всіх сторін елемента або визначити її тільки для зазначених сторін.

Коротка інформація

Значення за замовчуванням 0
Наслідує Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис 

<code>margin: [<размер> | <відсотки> | auto] {1,4}

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися у вказаному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

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

tr>
Табл. 1. Залежність від числа значень
Кількість значень Результат
1 Відступи будуть встановлені одночасно від кожного краю елемента.
2 Перше значення встановлює відступ від верхнього та нижнього країв, друге  ;— від лівого та правого.
3 Перше значення задає відступ від верхнього краю, друге — одночасно від лівого та правого країв, а третє — від нижнього краю.
4 Почергово встановлюється відступ від верхнього, правого, нижнього та лівого краю.

Величину відступів можна вказувати у пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, так і негативним числом. dl>

Пісочниця

Вінни-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що В цей час сніданок уже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
-tablet is-6-desktop playground-values"> 
div { background: #e4efc7; padding: 10px; margin: <span class="playground-active">{{ playgroundValue }}px</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin</title> <style> body { margin: 0; /* Забираємо відступи */
} 
.parent { margin: 20%; /* Відступи навколо елемента */
background: #e2edc1; /* Колір тла */
padding: 10px; /* Поля навколо тексту */
} 
.child { border: 3px solid #333391; /* Параметри рамки */
padding: 10px; /* Поля навколо тексту */
margin: 10px; /* Відступи */
}
</style>
</head>
<body> <div class="parent"> <div class="child"> Колективне несвідоме, хоч би як це здавалося парадоксальним, багатопланово продовжує невротичний онтологічний статус мистецтва.
</div>
</div>
</body>
</html>

Результат цього прикладу показаний на рис. 2.

Мал. 2 Рис. 2. Застосування властивості margin

Об'єктна модель

Об'єкт.style.margin

Примітка

Internet Explorer до версії 7 у режимі сумісності (quirk mode) не підтримує вирівнювання блоку по центру за допомогою правила margin: 0 auto. Також у цьому браузері спостерігається помилка із подвоєнням значення лівого або правого відступу для плаваючих елементів, вкладених у батьківські елементи. Подвоюється той відступ, що прилягає до сторони батька. Проблема зазвичай вирішується додаванням display: inline для плаваючого елемента.

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

Схлопування не спрацьовує:

  • для елементів, у яких на стороні схлопування встановлено властивість padding .
  • для елементів, у яких на стороні схлопування заданий кордон;
  • на елементах з абсолютним позиціонуванням, тобто. таких, у яких position встановлено як absolute;
  • на плаваючих елементах (для них властивість float встановлено як left або right);
  • для малих елементів;
  • для <html>.

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

Специфікація Статус
CSS Box Model Module Level 3 Робочий проект
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація
CSS Level 1 Рекомендація

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

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт. цілям, але потрібна допомога співтовариства розробників з реалізації стандарту. остаточного затвердження ения.
  • Working Draft (Робочий проект) — більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення правок редакторами проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

3 12 1 3.5 1 1
1 1 6 1

Браузери

У таблиці браузерів застосовуються такі позначення.

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

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

Відступи та поля

Практика

Автор та редактори

Автор : Влад Мержевич
Останнє змінення: 02.03.2020
Редактори: Влад Мержевич
© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS