Свойство padding в CSS определяет внутренние границы блока, создавая пространство между границами блока и его содержимым.
С его помощью в html-разметке можно, например, создать поля вокруг текста или увеличить площадь кнопки. Его значение соответствует ширине пустого поля между границей блока (при наличии ненулевой толщины отсчет ведется от внутренней стороны) и его содержимым, что улучшает восприятие, а также может приводить к увеличению размера самого элемента.
На примере ниже сделано следующее: есть блок div с желтым фоном и в нем содержимое в виде текста на зеленом фоне. К блоку применены отступы по всем сторонам padding: 20px 30px
.
See the Pen
padding by Андрей (@adlibi)
on CodePen.
Значения свойства padding
Для задания ширины полей внутри элемента индивидуально для каждой стороны существуют четыре отдельных инструкции. Это такие:
- padding-right – устанавливает отступ от правой границы блока;
- padding-left – слева;
- padding-top – сверху;
- padding-bottom – снизу.
По умолчанию пространство между границей и содержимым элемента отсутствует, то есть padding =0. При этом значение auto для этого свойство является некорректным.
Значение padding в CSS может записываться с помощью нескольких чисел – от 1 до 4.
Количество значений | Результат |
---|---|
1 | Все отступы одинаковы и равны указанному числу |
2 | Первое число определяет вертикальные отступы (сверху и снизу), второе – горизонтальные. |
3 | Первое – верхний отступ, второе – правый и левый, третье – нижний. |
4 | Все отступы различные |
Таким образом получается, что следующие три записи приведут к одному и тому же результату:
.box {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.box {
padding: 20px 20px 20px 20px;
}
.box {
padding: 20px;
}
НА ЗАМЕТКУ. Для запоминания очередности присвоения надо представить часовую стрелку. Задание значений полям начинается с 12 часов и проходит круг по направлению ее движения, то есть первое значение устанавливается для верхнего поля, второе – справа и т.д.
Значение свойства можно задавать с помощью нескольких единиц измерения:
- единицами, используемыми в CSS – px, em и т.п.;
- % – процентами от ширины элемента;
- inherit – наследования значений родительского элемента.
Padding и блочная модель
Использование этого свойства может привести к неожиданным результатам. Если вы создали элемент и указали у него ширину 200px и кроме того указали padding: 20px, то размер этого элемента неожиданно окажется 240px, то есть к установленной ширине добавятся размеры отступов. Чтобы сохранить первоначальный размер блока необходимо применить к нему свойство box-sizing: border-box
.
На примере демонстрируется два элемента с установленной одинаковой шириной и отступами, но ко второму применено border-box
, и его размеры не увеличиваются в зависимости от отступов.
See the Pen
padding box by Андрей (@adlibi)
on CodePen.