padding

Свойство padding позволяет задавать внутренние отступы элемента: от содержимого до края контейнера.

На скриншоте padding подсвечен зелёным цветом.

Padding может принимать следующие значения:

единицы длины — px, em, rem, pt и т. д.
% — процентное значение берётся от ширины контейнера. Например, ширина элемента — 200px, а padding-left — 10%. Фактически левый внутренний отступ будет 20px, т.к. это 10% от 200px.
inherit — наследует значение родителя.

Свойство padding не поддерживает отрицательные значения.

Все значения свойства `padding`

Значение	Описание
`padding-bottom`	Задаёт нижний отступ элемента
`padding-left`	Задаёт левый отступ элемента
`padding-right`	Задаёт правый отступ элемента
`padding-top`	Задаёт верхний отступ элемента
`padding`	Сокращённая запись, для установки всех свойств в одной строке

padding: 20px; — внутренний отступ со всех сторон равен 20px.

padding: 20px 30px; — первое значение для верха и низа, оно равно 20px; слева и справа по 30px.

padding: 10px 20px 30px; — первое значения для отступа сверху, второе cлева и cправа, третье для отступа снизу.

padding: 10px 20px 30px 40px; — значения применяются по часовой стрелке: сверху 10px, справа 20px, снизу 30px, слева 40px.