padding в CSS, отступы в HTML

Свойство 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.