Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0 + | 8.0 + | 1.0 + | 3.5 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
Значення за умовчанням | 0 |
---|---|
Успадковується | Ні |
Застосовується | До всіх елементів |
Посилання на специфікацію | http://www.w3.org/TR/CSS21/box.html#propdef-margin |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
встановлює величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елементу (рис. 1).
Якщо у елемента немає батьків, відступом буде відстань від краю елемента до краю вікна браузера з урахуванням того, що у самого вікна за умовчанням теж встановлені відступи. Щоб їх позбутися, варто встановлювати значення margin для селектора <body> рівне нулю.
Властивість margin дозволяє задати величину відступу відразу для всіх сторін елемента або визначити її тільки для зазначених сторін.
Синтаксис
margin: [значення | відсотки | auto] {1,4} | inherit
Значення
Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості значень і приведений в табл. 1.
Число значень | Результат |
---|---|
1 | Відступи будуть встановлені одночасно від кожного краю елемента. |
2 | Перше значення встановлює відступ від верхнього і нижнього краю, друге — від лівого і правого. |
3 | Перше значення задає відступ від верхнього краю, друге — одночасно від лівого і правого краю, а третє — від нижнього краю. |
4 | По черзі встановлюється відступ від верхнього, правого, нижнього і лівого краю. |
Величину відступів можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, так і негативним числом.
- auto
- Вказує, що розмір відступів буде автоматично розрахований браузером.
- inherit
- Успадковує значення батька.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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> .