padding

Обновлено: 30.05.2022

padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

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

Краткая информация

Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

padding: [<размер> | <проценты>] {1, 4}

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений
Число значений Результат
1 Поля будут установлены одновременно c каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего краёв, второе — от левого и правого.
3 Первое значение задаёт поле от верхнего края, второе — одновременно от левого и правого краёв, а третье — от нижнего края.
4 Поочерёдно устанавливается поля от верхнего, правого, нижнего и левого краёв.

Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Пример

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства padding

Объектная модель

Объект.style.padding

Браузеры

padding

Посмотреть совместимость на Can I use?

padding