Внешние отступы

3. Внешние отступы (поля)

На этой странице:

Свойства для создания внешних отступов с одной стороны
Интегрированное свойство для создания внешних отступов

Свойства для создания внешних отступов с одной стороны

Свойства для создания внешних отсупов с одной стороны

`margin-top`, `margin-right`, `margin-bottom`, `margin-left`
Значения:	<размер> \| <процент> \| `auto` \| `inherit`
По умолчанию:	0 (не для всех элементов)
Область применения:	все элементы
Наследование:	нет
Проценты:	относительно ширины блока-контейнера
Примечание:	внутренние отступы могут быть отрицательными

Здесь и далее свойства будут описываться при помощи такой таблицы. Варианты значений перечисляются при помощи знака |, который можно читать как “или”. Слова в угловых скобках определяют тип значения, любые другие слова представляют собой ключевые слова, которые должны применяться буквально, без кавычек.

Таким образом, значением односторонних внешних отступов может быть:

размер (например, 20px или 1em);
процент (например, 10%);
ключевое слово auto, означающее, что браузер будет вычислять значение автоматически;
ключевое слово inherit, означающее, что значение берётся такое же, как у родительского элемента.

Для внешних отступов допустимы отрицательные значения (элемент при этом может выходить за рамки родителя или перекрывать другие элементы).

Стандартным значением по умолчанию считается 0, но оно работает не для всех элементов (гарантированно для DIV и SPAN). Браузеры создают внешние отступы по умолчанию для многих элементов, начиная с BODY (небольшие поля на странице). С помощью внешних отступов создаются и промежутки между абзацами P (они, как правило, равны высоте текущей строки).

Если внешний отступ вычисляется в процентах, то они задаются относительно блока-контейнера. Контейнер — это первый предок элемента в иерархическом дереве элементов, который является блоком. Поясним определение контейнера на примере.

Строчный элемент STRONG является родителем элемента EM, но не является его контейнером. Первый блок-предок — P (дедушка), именно он и является контейнером для EM.

В качестве примера рассмотрим код:

Контейнером элемента EM является блок P.

Рассмотрим пример построение внешнего отступа.

Файл style.css

  
BODY {margin-left:120px;}

В примере для BODY задан внешний отступ слева в 120 пикселов. В освободившееся место можно вывести, например, фоновую полоску (как на этой странице книги). Как это сделать будет описано при рассмотрении свойств фона.

Файл index.htm

Внешние отступы по вертикали между блочными элементами (если не заданы рамки или внутренние отступы) не суммируются, а схлопываются — промежуток получается равным наибольшему из двух значений.

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

Допустим, мы задали для абзацев внешние вертикальные отступы при помощи правил:

P 
{ 
  margin-top:1em; 
  margin-bottom:1em; 
}

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

Внешние отступы, применённые к строчным элементам, имеют особенности: они работают только по горизонтали.

Файл style.css

  
EM
{
  margin-top:500px; 
  margin-right:50px; 
  margin-bottom:500px; 
  margin-left:50px; 
}

Файл index.htm

Отмеченная особенность относится только к строчным незамещаемым элементам, то есть к таким, содержание которых включено в HTML-код документа (например, текст). Внешние отступы строчных замещаемых элементов (таких как картинки) работают как внешние отступы блочных элементов (то есть работают и по горизонтали, и по вертикали).

Интегрированное свойство для создания внешних отступов

`margin`
Значения:	<размер> \| <процент> \| `auto` \| `inherit` правило четырёх сторон
По умолчанию:	не определено
Область применения:	все элементы
Наследование:	нет
Проценты:	относительно ширины блока-контейнера

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

Расстояния между абзацами, абзацем и заголовком задаются браузером по умолчанию одинаковыми (высота одной строки). Это нарушает принцип приближения: заголовок должен быть ближе к своему абзацу и дальше от чужого.

Файл style.css

  
/* Приближаем заголовок 
   к своему абзацу    */
H1, H2, H3, H4, H5, H6 
{
  margin-bottom:0.2em;
}
P  {margin:0.2em 0 1em;}

Нижний внешний отступ для заголовка уменьшен до 0.2em. Для абзаца уменьшен верхний внешний отступ. Благодаря схлопыванию это не повлияет на расстояние между абзацами — оно будет равно 1em.

Файл index.htm