Тег margin в CSS з прикладом
Встановлює відступ від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елемента.
Якщо у елемента немає батьківського елемента, відступом буде відстань від краю елемента до краю вікна браузера з урахуванням встановлених за замовчуванням відступів в самому вікні. Щоб їх усунути, слід встановити значення margin для селектора <body> рівне нулю.
Властивість margin дозволяє задати величину відступу одразу для всіх сторін елемента або визначити її лише для вказаних сторін.
Синтаксис
margin: [значення | відсотки | auto] {1,4} | inherit
Значення
Дозволяє використовувати одне, два, три або чотири значення, розділяючи їх пробілом. Ефект залежить від кількості значень і поданий у табл. 1.
Величину відступів можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, так і від'ємним числом.
- auto
- Вказує, що розмір відступів буде автоматично розрахований браузером.
- inherit
- Наслідує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin</title>
<style>
body {
margin: 0; /* Усуваємо відступи */
}
.parent {
margin: 20%; /* Відступи навколо елемента */
background: #fd0; /* Колір фону */
padding: 10px; /* Поля навколо тексту */
}
.child {
border: 3px solid #666; /* Параметри рамки */
padding: 10px; /* Поля навколо тексту */
margin: 10px; /* Відступи навколо */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>Результат цього прикладу показано на рис. 2.
Об'єктна модель
[window.]document.getElementById("elementID").style.margin
Браузери
Internet Explorer 6 у режимі сумісності (quirk mode) не підтримує вирівнювання блоку по центру за допомогою правила margin: 0 auto. Також у цьому браузері спостерігається помилка з подвоєнням значення лівого або правого відступу для плаваючих елементів, вкладених у батьківські елементи. Подвоюється той відступ, який прилягає до сторони батька. Проблема зазвичай вирішується додаванням display: inline для плаваючого елемента.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Примітка
У блочних елементів, розташованих поруч один з одним по вертикалі, спостерігається ефект згортання, коли відступи не сумуються, а об'єднуються між собою. Саме згортання діє на два і більше блоки (один може бути вкладений всередину іншого) з відступами зверху або знизу, при цьому прилягаючі відступи комбінуються в один. Для відступів ліворуч і праворуч згортання ніколи не застосовується.
Згортання не спрацьовує:
- для елементів, у яких на стороні згортання задано властивість padding;
- для елементів, у яких на стороні згортання задано межу;
- на елементах з абсолютним позиціонуванням, тобто таких, у яких position встановлено як absolute;
- на плаваючих елементах (для них властивість float встановлено як left або right);
- для рядкових елементів;
- для <html>.