CSS-свойство padding устанавливает внутренние отступы для всех четырех сторон элемента. Это короткое свойство для padding-top, padding-right, padding-bottom, и padding-left.

Значение по умолчанию: 0
Применяется к: Все элементы, кроме <tbody>, <thead>, <tfoot>, <tr>, <colgroup> и <col>. Это также относится к ::first-letter
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

padding: [ length | percentage] 1 to 4 values | initial | inherit

Примеры написания кода свойства padding:

p.one {
    padding: 20px;
}
p.two {
    padding: 35px 15px;
}

Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.

  • Если установлено одно значение, оно распространяется на все 4 стороны.
  • Если заданы два значения, первое значение применяется для верхней и нижней грани, второе значение для правой и левой.
  • Если заданы три значения, первое применяются к верхней, второе к правой и левой, третье к нижней грани.
  • Четыре значения применяются к верхней, правой, нижней, левой стороне в указанном порядке.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
padding-top Устанавливает верхний внутренний отступ элемента.
padding-right Устанавливает правый внутренний отступ элемента.
padding-bottom Устанавливает нижний внутренний отступ элемента.
padding-left Устанавливает левый внутренний отступ элемента.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента padding.

Поддержка браузеров

Свойство padding поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.