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 вы узнаете в следующих главах.