Свойство CSS padding-right
Как использовать свойство CSS padding-right для задания отступа справа от элемента. Значения свойства и примеры.
Свойство CSS padding-right задаёт ширину области отступа на правой стороне элемента. Отступ (padding) — это прозрачное пространство между содержимым элемента и его границей: увеличение padding-right отдаляет правую границу от содержимого (само содержимое остаётся на месте; элемент становится шире, если только box-sizing не установлен в border-box).
На этой странице рассматриваются допустимые значения (длины, проценты и общие ключевые слова CSS), способ вычисления процентных отступов и запускаемые примеры для каждого случая. Чтобы задать только правый отступ, используйте padding-right; чтобы задать все четыре стороны сразу, используйте сокращённое свойство padding.
Отрицательные значения недопустимы.
Это свойство не оказывает никакого эффекта на строчные элементы, например <span>.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. Исключение составляют случаи, когда свойство display установлено в table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Пространство отступа анимируется. |
| Версия | CSS1 |
| DOM Syntax | object.style.paddingRight = "40px"; |
С помощью свойства padding можно задать отступы со всех сторон элемента одним объявлением.
Синтаксис
Синтаксис свойства CSS padding-right
padding-right: length | initial | inherit;Пример свойства padding-right:
Пример свойства CSS padding-right со значением px
<!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 со значением pt
<!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 со значением %:
Процентное значение вычисляется относительно ширины содержащего блока элемента, а не его высоты. Это означает, что правый отступ масштабируется вместе с шириной макета, что удобно для гибких адаптивных интервалов.
<!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-right 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
Используйте padding-right, когда вам нужен отступ только с правой стороны блока — например, чтобы текст не перекрывал иконку справа, оставить место для полосы прокрутки или выровнять несимметричные интервалы в карточке. Если нужны одинаковые отступы со всех сторон, предпочтительнее сокращённое свойство padding; если нужен зазор снаружи границы, а не внутри неё, используйте margin-right.
Несколько вещей, которые стоит помнить:
- Отступ является частью кликабельной области и области фона. Цвет фона и фоновое изображение элемента распространяются на отступ, в отличие от внешнего отступа (margin).
- Отрицательные значения недопустимы. Чтобы сдвинуть содержимое в другую сторону, используйте отрицательный
margin. - По умолчанию отступ расширяет блок. При стандартной модели
content-boxpadding-rightприбавляется к общей ширине элемента. Установитеbox-sizing: border-box, чтобы зафиксировать объявленную ширину и поглотить отступ внутрь.
Связанные свойства
padding-left— отступ с противоположной стороныpadding-topиpadding-bottompadding— сокращённое свойство для всех четырёх сторонmargin-right— пространство снаружи границы