Cокращенное свойство для полей: margin

margin

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 6.0 3.5 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 1.0 1.0 6.0 6.0 1.0
Свойство
margin — это сокращенное свойство для полей, под полем понимается отступ с внешней стороны границы
Описание
Для того чтобы не задавать каждое поле по отдельности существует возможность задать сразу все поля. В качестве значения свойство margin может принимать от одного до четырех значений.


запись margin: 5px; равноценна записи margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;


запись margin: 5px 9px; равноценна записи margin-top: 5px; margin-bottom: 5px; margin-left: 9px; margin-right: 9px;


запись margin: 5px 9px 16px; равноценна записи margin-top: 5px; margin-right: 9px; margin-left: 9px; margin-bottom: 16px;


запись margin : 5px 9px 16px 11px; равноценна записи margin-top: 5px; margin-right: 9px; margin-bottom: 16px; margin-left: 11px;

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
margin-top | margin-right | margin-bottom | margin-left
Значение по умолчанию
auto — для свойства margin-top
auto — для свойства margin-right
auto — для свойства margin-bottom
auto — для свойства margin-left
Правила записи
свойство: значение;
Примеры

<p>

Это правило применит ко всем сторонам элемента поле равное 50px

</p>

<p>

Это правило применит к верхней и нижней стороне элемента поле равное 50px, а к левой и правой стороне элемента поле равное 20px

</p>

<p>

Это правило применит к верхней стороне элемента поле равное 40px, к левой и правой стороне элемента поле равное 20px, а к нижней стороне элемента поле равное 10px

</p>

<p>

Это правило применит к верхней стороне элемента поле равное 50px, к правой стороне элемента поле равное 20px, к нижней стороне элемента поле равное 10px, а к левой стороне элемента поле равное 70px

</p>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться