padding-left

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Свойство CSS padding-left определяет ширину левого внутреннего отступа элемента.

Интерактивный пример

padding-left: 1.5em;

padding-left: 10%;

padding-left: 20px;

padding-left: 1ch;

padding-left: 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;
}

Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.

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

Синтаксис

css
/ * <length> значения * /
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/ * <percentage> значение * /
padding-left: 10%;

/ * Глобальные значения * /
padding-left: inherit;
padding-left: initial;
padding-left: unset;

Значения

<length>

Фиксированный размер заполнения отступа. Не может быть отрицательным.

<percentage>

Размер заполнения зависит от ширины блока. Не может быть отрицательным.

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

Начальное значение0
Применяется квсе элементы, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияпроцент, как указан, или абсолютная длина
Animation typeдлина

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

padding-left = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}

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

Specification
CSS Box Model Module Level 3
# padding-physical

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