Свойство CSS padding
Learn how to use the CSS padding property to define the padding space on all sides of an element. Learn more about the property values and examples.
Свойство padding используется для создания отступов вокруг содержимого элемента со всех сторон.
Значения padding задаются с помощью длин или процентов.
info
Отрицательные значения недопустимы.
CSS свойство padding является сокращением для следующих свойств:
Свойство padding можно использовать для всех сторон (верх, низ, лево, право).
Свойство padding может быть задано одним, двумя, тремя или четырьмя значениями:
- При указании четырёх значений первое задаёт верхнюю сторону, второе — правую, третье — нижнюю, а четвёртое — левую.
- При указании трёх значений первое задаёт верхнюю сторону, второе — правую и левую, а третье — нижнюю.
- При указании двух значений первое задаёт верхнюю и нижнюю стороны, а второе — правую и левую.
- Если padding имеет только одно значение, оно применяется ко всем четырём сторонам
| Начальное значение | 0 |
|---|---|
| Применяется к | Ко всем элементам, кроме случаев, когда свойство display установлено в table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимация | Да. Отступы можно анимировать. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.padding = "30px"; |
Синтаксис
Синтаксис свойства CSS padding
padding: length | initial | inherit;Пример свойства padding:
Пример свойства CSS padding с четырьмя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>В приведённом примере этот код означает, что отступ сверху должен быть 15px, справа — 30px, снизу — 20px, а слева — 40px.
Пример свойства padding со значением "%":
Пример свойства CSS padding со значением %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>В примере ниже указаны два значения. Первое значение задаёт верхнюю и нижнюю стороны, а второе — правую и левую:
Пример свойства padding с двумя значениями:
Пример свойства CSS padding с двумя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Результат
Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | Задаёт отступ в px, pt, cm и т. д. Значение по умолчанию — 0. | Запустить » |
| % | Задаёт отступ в % от размера содержащего элемента. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Practice
Какие функции выполняет padding в CSS?