Свойство CSS padding-left
Свойство CSS padding-left задаёт отступ слева от содержимого элемента.
INFO
Отрицательные значения недопустимы.
INFO
Это свойство не оказывает влияния на строчные элементы, такие как <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"; |
Синтаксис
Синтаксис свойства CSS padding-left
css
padding-left: length | initial | inherit;Пример свойства padding-left:
Пример использования свойства CSS padding-left со значением в пикселях
html
<!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>Результат
Пример свойства padding-left со значением "3cm":
Пример использования свойства CSS padding-left со значением в сантиметрах
html
<!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-left со значением в процентах:
Пример свойства CSS padding-left со значением в %
html
<!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, cm и т. д. Значение по умолчанию — 0px. | Запустить » |
| % | Задаёт левый отступ в процентах от ширины содержащего элемента. | Запустить » |
| initial | Устанавливает для свойства значение по умолчанию. | Запустить » |
| inherit | Наследует значение свойства от родительского элемента. |
Практика
Как правильно использовать padding-left в CSS согласно содержанию страницы?