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

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

CSS отступы

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

В 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 поля

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

В 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 свойства определения отступов и полей