Свойство CSS `padding`

padding — CSS-свойство-сокращение, которое одновременно задаёт область внутренних отступов элемента со всех четырёх сторон.

Попробуйте

padding: 1em;

padding: 10% 0;

padding: 10px 50px 20px;

padding: 10px 50px 30px 0;

padding: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

Область внутренних отступов элемента — это пространство между его содержимым и границей.

Составные свойства

Это свойство является сокращением для следующих CSS-свойств:

• padding-top
• padding-right
• padding-bottom
• padding-left

Синтаксис

/* Apply to all four sides */
padding: 1em;

/* top and bottom | left and right */
padding: 5% 10%;

/* top | left and right | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

Свойство padding может задаваться одним, двумя, тремя или четырьмя значениями. Каждое значение — это <length> или <percentage>. Отрицательные значения недопустимы.

• Если задано одно значение, оно задаёт одинаковые внутренние отступы со всех четырёх сторон.
• Если заданы два значения, первое задаёт внутренние отступы сверху и снизу, а второе — слева и справа.
• Если заданы три значения, первое задаёт внутренний отступ сверху, второе — справа и слева, а третье — снизу.
• Если заданы четыре значения, они задают внутренние отступы сверху, справа, снизу и слева именно в таком порядке (по часовой стрелке).

Значения

<length>

Размер внутреннего отступа в виде фиксированного значения.

<percentage>

Размер внутреннего отступа в процентах относительно строчного размера (ширины в языке с горизонтальным письмом, определяемого свойством writing-mode) содержащего блока.

Формальное определение

Формальный синтаксис

padding = 
  <'padding-top'>{1,4}

Примеры

Задание внутренних отступов в пикселях

HTML

<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

Результат

Задание внутренних отступов в пикселях и процентах

padding: 5%; /* All sides: 5% padding */

padding: 10px; /* All sides: 10px padding */

padding: 10px 20px; /* top and bottom: 10px padding */
/* left and right: 20px padding */

padding: 10px 3% 20px; /* top:            10px padding */
/* left and right: 3% padding   */
/* bottom:         20px padding */

padding: 1em 3px 30px 5px; /* top:    1em padding  */
/* right:  3px padding  */
/* bottom: 30px padding */
/* left:   5px padding  */

Спецификации

Совместимость с браузерами

См. также

• padding-top, padding-right, padding-bottom и padding-left
• padding-block-start, padding-block-end, padding-inline-start и padding-inline-end
• Сокращения padding-block и padding-inline
• Руководство Введение в блочную модель CSS
• Модуль Блочная модель CSS