Свойство CSS padding-bottom
Свойство padding-bottom задаёт отступ снизу для элемента. Оно определяет пространство между содержимым элемента и его нижней границей.
Отступ элемента влияет на вычисление высоты элемента. В частности, padding-bottom увеличивает общую высоту, добавляя пространство под содержимым. Если вы используете значение «border-box» свойства box-sizing, расчёт общей высоты изменяется так, что отступ включается в указанную высоту.
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 | element.style.paddingBottom = "5%"; |
Синтаксис
Синтаксис свойства CSS padding-bottom
css
padding-bottom: length | % | initial | inherit;Пример свойства padding-bottom:
Пример свойства CSS padding-bottom со значением px
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Результат
Пример свойства padding-bottom со значением «length»:
Пример свойства CSS padding-bottom со значением cm
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | Задаёт нижний отступ в px, pt, cm и т. д. Начальное значение — 0. | Запустить » |
| % | Задаёт нижний отступ в процентах от ширины содержащего блока. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова цель свойства 'padding-bottom' в CSS?