Энциклопедия CSS: padding

CSS: padding

Тематические порталы

Портал CSS • Портал Веб-разработчиков

padding — CSS-свойство, которое задаёт внутренний отступ элемента. Этот отступ находится между содержимым и границей блока.

Свойство используют, когда нужно добавить свободное место внутри кнопки, карточки, текстового блока, поля формы или другого элемента интерфейса.

Синтаксис

selector {
  padding: значение;
}

Пример:

.box {
  padding: 20px;
}

В этом случае отступ 20 пикселей будет добавлен со всех четырёх сторон элемента.

Варианты записи

Свойство padding можно записывать с одним, двумя, тремя или четырьмя значениями:

.box-1 {
  padding: 20px;              /* со всех сторон */
}

.box-2 {
  padding: 10px 20px;         /* сверху/снизу, справа/слева */
}

.box-3 {
  padding: 10px 20px 30px;    /* сверху, справа/слева, снизу */
}

.box-4 {
  padding: 10px 20px 30px 40px; /* сверху, справа, снизу, слева */
}

Порядок значений при записи с четырьмя параметрами идёт по часовой стрелке: верх, право, низ, лево.

Отступы отдельных сторон

Для каждой стороны есть отдельное свойство:

• padding-top — верхний внутренний отступ;
• padding-right — правый внутренний отступ;
• padding-bottom — нижний внутренний отступ;
• padding-left — левый внутренний отступ.

Пример:

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Живой пример

CSS: свойство padding

HTMLКопировать

<div class="padding-demo"> <div class="box box-small">padding: 8px;</div> <div class="box box-medium">padding: 20px;</div> <div class="box box-different">padding: 10px 30px;</div> </div>

CSSКопировать

.padding-demo { font-family: Arial, sans-serif; background: #f7f9fc; border: 1px solid #d6e0ea; padding: 18px; } .padding-demo .box { margin-bottom: 14px; background: #ffffff; border: 2px solid #3b82f6; color: #1f2937; font-weight: 600; } .padding-demo .box-small { padding: 8px; } .padding-demo .box-medium { padding: 20px; } .padding-demo .box-different { padding: 10px 30px; }

РезультатСкачать файлом

padding и размер блока

По умолчанию padding увеличивает общий размер элемента. Например, если блоку задана ширина 300px и внутренний отступ 20px, фактическая ширина блока станет больше.

Чтобы ширина включала внутренние отступы и границу, часто используют box-sizing: border-box;:

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid #999999;
}

Отличие от margin

padding создаёт отступ внутри элемента, а margin — снаружи.

.button {
  padding: 12px 18px; /* место внутри кнопки */
  margin: 10px;       /* место вокруг кнопки */
}

Отрицательные значения для padding не используются.

Источники

• MDN Web Docs: padding
• W3C: CSS Box Model Module Level 3