CSS-свойство padding позволяет вам установить интервал между содержимым элемента и его границей border (или краем поля элемента, если у него нет определенной границы).

На padding влияет background-color. Например, если вы установите цвет фона для элемента, он будет виден через область заполнения padding.

Padding для отдельных сторон

Вы можете указать отступы для отдельных сторон используя CSS-свойства padding-top, padding-right, padding-bottom и padding-left соответственно. Давайте посмотрим пример, чтобы понять, как это работает:

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}

Свойства padding могут быть указаны с использованием следующих значений:

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

В отличие от CSS-свойства margin, значение отступа не может быть отрицательным.

Сокращенное свойство padding

Свойство padding является кратким свойством, чтобы избежать установки отступов каждой стороны отдельно, то есть padding-top, padding-right, padding-bottom и padding-left.

Посмотрим на следующий пример, чтобы понять, как это работает:

h1 {
    padding: 50px; /* apply to all four sides */
}
p {
    padding: 25px 75px; /* vertical | horizontal */
}
div {
    padding: 25px 50px 75px; /* top | horizontal | bottom */
}
pre {
    padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}

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

  • Если указано одно значение, оно применяется ко всем четырем сторонам.
  • Если указаны два значения, первое значение применяется к верхней и нижней части, а второе значение применяется к правой и левой стороне элемента.
  • Если указано три значения, первое значение применяется к верхней, второе значение применяется к правой и левой стороне, а последнее значение применяется к нижней части.
  • Если указано четыре значения, они применяются соответственно к верхнему, правому, нижнему и левому краям поля элемента в указанном порядке.

Рекомендуется использовать сокращенные свойства, это поможет вам сэкономить время, избегая лишней типизации упростив отслеживание и поддержку вашего CSS-кода.

Влияние отступов и границ на макет

При создании разметки веб-страницы добавление отступа или границы к элементам иногда приводит к неожиданному результату, поскольку отступ и граница добавляются к ширине и высоте блока, сгенерированного элементом, как как это описано в руководстве по Блочной модели в CSS.

Например, если вы установите ширину элемента <div> равной 100% и также примените отступ или границу к нему, то появится горизонтальная полоса прокрутки. Давайте посмотрим на пример:

div {
    width: 100%;
    padding: 25px;
}

Чтобы предотвратить изменение ширины и высоты поля элемента и отступов, вы можете использовать CSS-свойство box-sizing. В следующем примере ширина и высота поля <div> останутся неизменными, однако область содержимого будет уменьшаться с увеличением отступа или границы.

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

Подробнее об особенностях определения CSS box sizing вы узнаете в следующих главах.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.