margin

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

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

CSS | CSS1
Значення за умовчанням | 0
Наслідує | Ні
Застосовується | До усіх елементів
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/box.html#propdef - margin

Опис

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

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

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

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

Синтаксис

margin: [значення | відсотки | auto] {1,4} | inherit

Значення

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

Таблиця. 1. Залежність від числа значень
Число значень | Результат
1 | Відступи будуть встановлені одночасно від кожного краю елементу.
2 | Перше значення встановлює відступ від верхнього і нижнього краю, друге - від лівого і правого.
3 | Перше значення задає відступ від верхнього краю, друге - одночасно від лівого і правого краю, а третє - від нижнього краю.
4 | По черзі встановлюється відступ від верхнього, правого, нижнього і лівого краю.

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

auto

Вказує, що розмір відступів буде автоматично розрахований браузером.

inherit

Наслідує значення батька.

Приклад

HTML 4.01CSS 2.1IE 6IE 7IE 8Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>margin</title>

<style type="text/css">

BODY {

margin: 0; /* Прибираємо відступи */

}

DIV.parent {

margin: 20%; /* Відступів навколо елементу */

background: #fd0; /* Колір фону */

padding: 10px; /* Полів навколо тексту */

}

DIV.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.

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

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

[window.]document.getElementById("elementID").style.margin

Браузери

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

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