Поля и отступы элементов в CSS

css

Содержание:



Свойство MARGIN

Свойство Значения Пр* Нc*
margin [ ДЛИНА, %, auto ]{1,4}, inherit + -
margin-bottom
margin-left
margin-right
margin-top
ДЛИНА, %, auto, inherit + -

Сокращённая форма записи свойств, которые задают ширину всего поля элемента (внешний отступ) или полей по отдельности, с каждой стороны. Вот схема блочного элемента css, где визуально представлены поля и отступы, рамка, и не забываем, что для разных версий html различные браузеры определяют ширину и высоту элемента по-своему:

поля и отступы блочного элемента в css

Значения:

Подходят любые единицы CSS, допускаются отрицательные значения. Одно значение задает общую ширину поля. Два значения: 1-ое — для верхнего и нижнего поля, 2-ое — для левого и правого. Три значения: 1-ое — для верхнего, 2-ое — для левого и правого, 3-е — для нижнего. Четыре значения установят ширину полей в следующем порядке: верхнее, правое, нижнее, левое, следуя стандартному порядку в CSS:

{ margin: 10px 20px 10px 20px;} — равнозначно: { margin: 10px 20px;}
{ margin: -10px 20px 35px 20px;} — равнозначно: { margin: -10px 20px 35px;}

% — относительно ширины или высоты родительского элемента.
auto — определяется браузером автоматически, см. примеры.
inherit — наследование свойств родителя.

Свойства margin-bottom, margin-left,
margin-right, margin-top

Эти свойства задают ширину каждого поля по отдельности, для каждой из сторон элемента.
Значения: как у свойства margin, допустимо использовать одно значение.

Пример:

.element { margin-top: 2em; margin-left: 2em} — для элемента задано верхнее и левое поле шириной 2em.

Горизонтальные поля

Пример:

.blok { width: 300px; background: #f0f0f0;}
.element { width: 220px; margin-right: 20px; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border: 2px solid #000; background: #ff9}

— родительский блок шириною 300px; а для элемента задана ширина 220px и горизонтальные поля, правое — 20px, левое со значением auto, которое рассчитано браузером, как равное 60px (300 - 220 - 20 = 60):

свойство margin

Если всем трём свойствам: Width, Margin-left и Margin-right присвоить значения, отличные от auto, то свойству Margin-right будет принудительно присвоено значение auto. На практике это будет означать, что его значение дополнит общую ширину элемента до ширины родительского блока.

Если значение auto установлено для всех трёх свойств, то поля станут равняться нулю, а ширина Width станет максимальной. Если значение свойства Width задано явно, а оба поля имеют значение auto, то для них устанавливается одинаковая величина, а элемент центрируется в границах родителя, т.е. происходит его выравнивание по центру:

выравнивание элемента по центру

Особенности вертикального форматирования

Значение auto переопределится в 0, если оно задано для свойств Margin-top и Margin-bottom блочного элемента в нормальном потоке. Есть ещё одна особенность вертикального форматирования: у блочных элементов происходит перекрытие смежных вертикальных полей.

Скажем, если для элементов списка заданы значения вертикальных полей: li { margin: 15px 0 20px 0;}, то, казалось бы, что расстояние между двумя элементами списка должно быть 35px: 15px (нижнее поле предыдущего) + 20px (своё верхнее поле), — а оно будет 20px. Меньшее из полей игнорируется в пользу большего:

перекрытие вертикальных полей

Свойство PADDING

Свойство Значения Пр* Нc*
padding [ ДЛИНА, % ]{1,4}, inherit + -
padding-bottom
padding-left
padding-right
padding-top
ДЛИНА, %, inherit + -

Сокращённая форма записи свойств, она задаёт ширину общего отступа элемента (внутренний отступ) или величину отступов с каждой стороны по отдельности.

Значения:

Как у свойства Margin, только не допускаются отрицательные значения, и отсутствует значение auto, например:

{ padding: 20px 20px 20px 20px;} — равнозначно: { padding: 20px;}
{ padding: 5px 20px 35px 20px;} — равнозначно: { padding: 5px 20px 35px;}

Пример:

.blok { width: 300px; background: #f0f0f0;}
.element { padding: 10px 20px; width: 220px; margin: 5px auto; border: 2px solid #000; background: #ff9}

— для элемента задано свойство Padding, верхний и нижний отступы 10px, левый и правый отступы 20px:

свойство padding

Свойства padding-bottom, padding-left,
padding-right, padding-top

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

Пример:

.element { padding-left: 5%; padding-right: 5%}
— для элемента заданы левый и правый отступы равные 5% ширины его родителя.

Содержание: