CSS свойство padding-left

Свойство padding-left устанавливает отступ с левой стороны элемента.

Отрицательные значения недопустимы.
Это свойство не имеет эффекта на строчных элементах, подобно <span>.
Значение по умолчанию 0
Применяется Ко всем элементам, кроме тех случаев, когда свойство display имеет значения table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter.
Наследуется Нет
Анимируемое Да. Отступ анимируем.
Версия CSS1
DOM синтаксис object.style.paddingLeft = "40px";

Синтаксис

padding-left: length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border: 2px solid #000; 
      color: #1c87c9;
      padding-left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства padding-left </h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>

Рассмотрим другой пример, где отступ равен "2cm":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border: 2px solid #000; 
      color: #1c87c9;
      padding-left: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства padding-left</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>

Значения

Значение Описание
length Устанавливает левый отступ в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию - 0px.
% Устанавливает левый отступ в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Что делает свойство CSS 'padding-left'?
Считаете ли это полезным?