Отступы и поля

Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры - отступы и поля. CSS предоставляет полный контроль над этими параметрами.

CSS отступы

Отступы - это промежуток снаружи элемента за пределами любых установленных рамок.


У этого элемента есть отступ в 70px.

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

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

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

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

Также, можно использовать отрицательные значения.

В следующем примере установим отступы для всех четырех сторон элемента <p>:


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

margin - Краткая форма записи

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

CSS свойство margin является короткой формой записи следующих свойств определения отступов:

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

Это работает так:

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

  • margin: 25px 50px 75px 100px;
    • верхний отступ 25px
    • правый отступ 50px
    • нижний отступ 75px
    • левый отступ 100px

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

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

  • margin: 25px 50px 75px;
    • верхний отступ 25px
    • правый и левый отступы 50px
    • нижний отступ 75px

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

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

  • margin: 25px 50px;
    • верхний и нижний отступы 25px
    • правый и левый отступы 50px

p {
  margin: 25px 50px;
}

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

  • margin: 25px;
    • все четыре отступа 25px

p {
  margin: 25px;
}

Значение auto

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

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


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

Значение inherit

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


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

p.ex1 {
  margin-left: inherit;
}

Схлопывание отступов

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

Это происходит только с верхними и нижними отступами и не случается с левыми и правыми отступами!

Посмотрите на следующий пример:


h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

Здесь у элемента <h1> нижний отступ установлен в 50px, а у элемента <h2> верхний отступ установлен в 20px.

Логика подсказывает, что вертикальный отступ между элементами <h1> и <h2> должен быть 70px (50px + 20px). Однако из-за схлопывания отступов действительный вертикальный отступ между этими элементами будет 50px.

CSS поля

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


У этого элемента есть поля в 70px.

В CSS есть свойства, позволяющие определять поле для каждой стороны элемента:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

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

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

Внимание! Отрицательные значения не допустимы.

В следующем примере установим поля для всех четырех сторон элемента <div>:


div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

padding - Краткая форма записи

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

CSS свойство padding является короткой формой записи следующих свойств определения полей:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Это работает так:

Если у свойства padding определено четыре значения:

  • padding: 25px 50px 75px 100px;
    • верхнее поле 25px
    • правое поле 50px
    • нижнее поле 75px
    • левое поле 100px

div {
  padding: 25px 50px 75px 100px;
}

Если у свойства padding определено три значения:

  • padding: 25px 50px 75px;
    • верхнее поле 25px
    • правое и левое поля 50px
    • нижнее поле 75px

div {
  padding: 25px 50px 75px;
}

Если у свойства padding определено два значения:

  • padding: 25px 50px;
    • верхнее и нижнее поля 25px
    • правое и левое поля 50px

div {
  padding: 25px 50px;
}

Если у свойства padding определено одно значение:

  • padding: 25px;
    • все четыре поля 25px

div {
  padding: 25px;
}

Ширина полей и элемента

CSS свойство width определяет ширину области с содержимым элемента. Область с содержимым - это пространство внутри полей, рамок и отступов элемента (блочная модель).

Таким образом, если у элемента задана ширина, то поля будут добавляться к общей ширине элемента. Это часто приводит к нежелательным результатам.

В следующем примере для элемента <div> устанавливается ширина в 300px. Однако реальная ширина элемента <div> будет 350px (300px + 25px левого поля + 25px правого поля):


div {
  width: 300px;
  padding: 25px;
}

Чтобы ширина была 300px без учета полей, можно использовать свойство box-sizing. Это будет определять реальную ширину элемента - если ширина полей будет увеличиваться, доступное пространство содержимого будет уменьшаться.


div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

В своем файле таблиц стилей измените код CSS для тега <h2> следующим образом:


h2 {
   font-size: 1.5em;
   background-color: #ccc;
   margin: 1em;
   padding: 3em;
}

Вы увидите, что заголовки второго уровня отодвинутся от соседних элементов. В данном примере используется краткая форма записи свойств отступов и полей.

Все CSS свойства определения отступов и полей

Свойство Описание
margin Короткое свойство, определяющее размер всех отступов элемента за одну декларацию
margin-bottom Определяет размер нижнего отступа элемента
margin-left Определяет размер левого отступа элемента
margin-right Определяет размер правого отступа элемента
margin-top Определяет размер верхнего отступа элемента
padding Короткое свойство, определяющее размер всех полей элемента за одну декларацию
padding-bottom Определяет размер нижнего поля элемента
padding-left Определяет размер левого поля элемента
padding-right Определяет размер правого поля элемента
padding-top Определяет размер верхнего поля элемента