Свойство CSS padding-left
Как использовать свойство CSS padding-left для задания отступа слева от элемента. Значения свойства и примеры.
Свойство CSS padding-left задаёт ширину области отступа с левой стороны элемента. Отступ (padding) — это пространство между содержимым элемента и его границей: увеличение padding-left смещает содержимое вправо, дальше от левого края, не затрагивая соседние элементы.
На этой странице рассматривается синтаксис padding-left, принимаемые единицы и ключевые значения, порядок вычисления процентов, взаимодействие с сокращённым свойством padding и блочной моделью, а также приводятся работающие примеры.
Когда использовать padding-left
Используйте padding-left (вместо сокращённого padding) тогда, когда нужно изменить только одну сторону и при этом сохранить явное, удобочитаемое правило — например, для отступа текста в списке, смещения метки от иконки или создания «воздуха» слева от карточки.
Если нужно задать все четыре стороны одновременно, предпочтительнее использовать сокращённое свойство padding. Отдельные свойства для каждой стороны — padding-left, padding-right, padding-top и padding-bottom — удобны для переопределения одного значения после того, как остальные установлены сокращённой записью.
Padding — это не margin. Padding находится внутри границы элемента и использует фон элемента; margin-left добавляет пространство снаружи границы и всегда прозрачен. Чтобы отделить элемент от соседа, используйте margin; чтобы сдвинуть содержимое внутрь — используйте padding.
Отрицательные значения не допускаются. В отличие от margin, padding не может быть отрицательным.
Для строчных элементов — например, <span> — горизонтальный padding применяется (и виден), однако он не раздвигает окружающие строчные блоки по вертикали, поэтому визуально кажется, что эффект на разметку отсутствует. Для полного контроля установите элементу display: inline-block или display: block.
Как padding-left влияет на блочную модель
По умолчанию браузер использует стандартную блочную модель CSS, при которой итоговая ширина элемента равна его width плюс левый и правый padding плюс границы. Таким образом, добавление padding-left: 100px увеличивает общую ширину элемента на 100px.
Если нужно, чтобы padding учитывался внутри объявленной width, а не добавлялся к ней, установите box-sizing: border-box. Именно это чаще всего приводит к ошибке «разметка вышла за пределы после добавления padding» — border-box её устраняет.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам, за исключением случаев, когда свойство display задано как table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Пространство padding поддаётся анимации. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.paddingLeft = "40px"; |
Синтаксис
Синтаксис свойства CSS padding-left
padding-left: length | percentage | initial | inherit;Значение чаще всего представляет собой фиксированную длину (px, em, rem, cm, …) или процент. Проценты вычисляются относительно ширины содержащего блока — причём как для левого/правого, так и для верхнего/нижнего padding — поэтому процентный отступ масштабируется вместе со шириной контейнера.
Пример со значением px
Фиксированное значение в пикселях — наиболее предсказуемый вариант. Здесь padding-left: 100px сдвигает текст параграфа на 100px от левой границы:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 100px;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Результат
Пример со значением cm
Любая абсолютная единица длины работает аналогично. Здесь отступ задан в сантиметрах:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 3cm;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Пример с процентным значением
Процент вычисляется относительно ширины содержащего блока, поэтому отступ увеличивается и уменьшается вместе с разметкой. Обратите внимание: сначала объявляется сокращённое свойство padding: 20px, а затем padding-left: 15% переопределяет только левую сторону:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 20px;
padding-left: 15%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Значения
| Значение | Описание | Пример |
|---|---|---|
| length | Задаёт левый отступ как фиксированную длину (px, pt, em, rem, cm и др.). Значение по умолчанию — 0. Отрицательные значения недопустимы. | Пример » |
| % | Задаёт левый отступ как процент от ширины содержащего блока. | Пример » |
| initial | Сбрасывает свойство к значению по умолчанию (0). | Пример » |
| inherit | Берёт вычисленное значение padding-left родительского элемента. (По умолчанию padding не наследуется.) |
Связанные свойства
padding— сокращённое свойство, задающее все четыре стороны одновременно.padding-right,padding-top,padding-bottom— остальные свойства для отдельных сторон.margin-left— добавляет пространство снаружи границы, а не внутри неё.box-sizing— управляет тем, добавляется ли padding кwidthэлемента или включается в неё.display— влияет на то, как горизонтальный padding работает для строчных и блочных элементов.