Поля CSS

Поля используются для создания пространства вокруг элементов, за пределами любых определенных границ.

Поля CSS

Свойства CSS margin используются для создания пространства вокруг элементов за пределами любых определенных границ.

С помощью CSS у вас есть полный контроль над полями. Есть свойства для установки поля для каждой стороны элемента (вверху, справа, внизу и влево).

Маржа - Отдельные Стороны

CSS имеет свойства для указания поля для каждой стороны элемента:

margin-top
margin-right
margin-bottom
margin-left

Все свойства поля могут иметь следующие значения:

авто - браузер вычисляет маржу
длина - указывает поле в px, pt, cm и т. д.
% - указывает поле в % от ширины содержащего элемента
наследовать - указывает, что поле должно быть унаследовано от родительского элемента

Совет: Допускаются отрицательные значения.

Пример

Установите различные поля для всех четырех сторон элемента <p>:

p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }

Маржа - Сокроченная Собственность

Чтобы сократить код, можно указать все свойства поля в одном свойстве.

Свойство margin является сокращенным свойством для следующих отдельных свойств маржи:

margin-top
margin-right
margin-bottom
margin-left

Итак, вот как это работает:

Если свойство margin имеет четыре значения:

поле: 25px 50px 75p 100px;

верхний полей 25 пикселей
правое поле 50 пикселей
нижнее поле составляет 75 пикселей
левый край составляет 100 пикселей

Пример

Используйте свойство margin shorthand с четырьмя значениями:

p { margin: 25px 50px 75px 100px; }

Если свойство margin имеет три значения:

поле: 25px 50px 75px;

верхний полей 25 пикселей
правые и левые поля имеют 50 пикселей
нижнее поле составляет 75 пикселей

Пример

Используйте свойство margin shorthand с тремя значениями:

p { margin: 25px 50px 75px; }

Если свойство margin имеет два значения:

поле: 25px 50px;

верхние и нижние поля 25 пикселей
правые и левые поля имеют 50 пикселей

Пример

Используйте свойство сократкия маржи с двумя значениями:

p { margin: 25px 50px; }

Если свойство margin имеет одно значение:

поле: 25px;

все четыре поля 25 пикселей

Пример

Используйте свойство сокращенной маржи с одним значением:

p { margin: 25px; }

Вы можете установить свойству margin значение auto для горизонтального центрирования элемента внутри его контейнера.

Затем элемент займет указанную ширину, а оставшееся пространство будет разделено поровну между левым и правым полями.

Пример

Используйте маржу: авто:

div { width: 300px; margin: auto; border: 1px solid red; }

Наследуемое значение

Этот пример позволяет унаследовать левое поле элемента <p class="ex1"> от родительского элемента(<div>):

Пример

Использование унаследуемого значения:

div { border: 1px solid red; margin-left: 100px; }

p.ex1 { margin-left: inherit; }