/css/margin:> Поле коробки_

Свойство margin

Синтаксис

CSS 1
CSS 2‒2.2
margin: <ширина-поля>{1,4} | inherit

<ширина-поля> = <длина> | <процент> | auto

Описание

Свойство margin (от англ. "margin" ‒ «поле») является сокращённым свойством, которое определяет размер поля для всех четырёх сторонmargin-top», «margin-right», «margin-bottom», «margin-left»).

Область поля коробки
Область поля коробки
Применяется: в CSS 1‒2.0 ко всем элементам;
в CSS 2.1‒3.0 ко всем элементам, кроме элементов с типами отображения таблиц, за исключением табличной подписи, таблицы и встроенной таблицы
Наследование: отсутствует;
Проценты: относительно ширины содержательного блока;
Медиа: визуальные.

Условия использования

В качестве значения может быть указано:

  • одно значение: применяется ко всем сторонам;
  • два значения: первое значение применяется к верхнему и нижнему полю, а второе значение применяется к правому и левому полю;
  • три значения: первое значение применяется к верхнему полю, второе значение применяется к левому и правому полю, а третье значение применяется к нижнему полю;
  • четыре значения: применяются к верхнему, правому, нижнему и левому полю соответственно;

JavaScript

[объект].style.margin="[значение]";


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

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


Значения

<длина>
Определяет фиксированную ширину.
<процент>
Процентное значение вычисляется относительно ширины содержательного блока созданной коробки.
auto
Автоматическое вычисление размера поля.
inherit
Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: в CSS 1‒2.0 не определено, в CSS 2.1‒3.0 определяется отдельными свойствами.


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство margin</title>
<style type="text/css">
.box {
display: inline-block;
font-size: 13pt;
}
.containing { background-color: #d0d0d0; }
.margin {
background-color: white;
margin: 2em 1.5em 1em 0.5em;
width: 15em;
height: 5em;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Поле коробки</h1>
<div class="box containing">
<div class="box margin">Содержимое коробки</div>
</div>
</body>
</html>
Свойство margin