Свойство CSS padding-right
Свойство CSS padding-right задаёт отступ справа от элемента.
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.paddingRight = "40px"; |
TIP
С помощью свойства padding можно задать отступы со всех сторон элемента одной декларацией.
Синтаксис
Синтаксис свойства CSS padding-right
css
padding-right: length | initial | inherit;Пример использования свойства padding-right:
Пример свойства CSS padding-right со значением в пикселях
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100px;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</body>
</html>Результат
Пример свойства padding-right со значением "length":
Пример свойства CSS padding-right со значением в пунктах
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100pt;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>Пример свойства padding-right, заданного в процентах:
Пример свойства CSS padding-right со значением в %:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 15px;
padding-right: 10%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | Задаёт правый отступ в px, pt, cm и т. д. Значение по умолчанию — 0px. | Запустить » |
| % | Задаёт правый отступ в процентах от ширины содержащего элемента. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова функция свойства padding-right в CSS?