Поля (margin) и отступы (padding)



Свойства margin и padding необходимы для создания блочных элементов. В чем же их отличие? Padding создает отступы вокруг содержимого блока, а margin определяет пространство за пределами элемента.

На предыдущих уроках мы познакомились с понятием блочный элемент. Свойства margin и padding рассмотрим на примерах элементов div и span. Div - элемент образующий блок и имеет абзацные отступы. Вид блока управляется с помощью стилей. Элемент span - контейнер для внутреннего текста. С помощью тега span можно выделить часть информации внутри других тегов и установить для нее свой стиль.

Margin (поля)


Поля задают свободное пространство вокруг блока. Поля можно определять отдельно для каждой стороны элемента:

  • margin-top - ширина верхнего поля.
  • margin-right - ширина правого поля.
  • margin-bottom - ширина нижнего поля..
  • margin-left - ширина левого поля.

Чаще делают сокращенную запись в следующем порядке: свойство margin и через пробел указывается ширина верхнего, правого, нижнего и левого полей. Записывают именно в этом порядке (по часовой стрелке).

Пример записи кода:

p{ margin:25px 10px 15px 10px; }

Если ширина верхнего и нижнего, левого и правого полей одинакова, то запись будет выглядеть так:

p{ margin:25px 10px; }

Если ширина всех полей одинакова, то запись будет выглядеть так:

p{ margin:10px; }

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

Пример записи кода:

#best, #west, #most, #kast{ border: 1px solid red; margin:10px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

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


Padding (отступы)


Отступы отделяют от блока содержимое. Параметры отступов можно задавать для каждой стороны отдельно:

  • padding-top - ширина верхнего отступа.
  • padding-right - ширина правого отступа.
  • padding-bottom - ширина нижнего отступа.
  • padding-left - ширина левого отступа.

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


#best, #west, #most, #kast{ border: 1px solid red; margin:10px; padding:10px 15px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Зададим фон нашим элементам.

#best, #west, #most, #kast{ border: 1px solid red; margin:10px; padding:10px 15px; } #best, #west{ background:#9F3; } #most, #mast{ background:#9999CC; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Зададим размеры наших блоков.

#best, #west, #most, #mast{ border: 1px solid red; margin:10px; padding:10px 15px; } #best{ background:#9F3; width:200px; height:50px; } #west{ background:#9F3; width:200px; } #most, #mast{ background:#9999CC; width:200px; height:50px; }

РЕЗУЛЬТАТ В БРАУЗЕРАХ Opera, Firefox и Chrome :

    ПРИМЕР

IE не включает в размер блока поля и отступы и выглядеть будет иначе. Это необходимо учитывать при разработке. Поэтому ширину блока для #most, #mast зададим 150px.

#best, #west, #most, #mast{ border: 1px solid red; margin:10px; padding:10px 15px; } #best{ background:#9F3; width:200px; height:50px; } #west{ background:#9F3; width:200px; } #most, #mast{ background:#9999CC; width:150px; height:50px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Далее рассмотрим: Разница между padding и margin.