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

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

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

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

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