CSS-свойство padding-bottom
Узнайте, как CSS-свойство padding-bottom добавляет пространство между содержимым элемента и его нижней границей, со значениями и примерами.
Свойство padding-bottom задаёт величину пространства между содержимым элемента и его нижней границей. Оно управляет внутренним отступом только с нижней стороны и является одним из четырёх отдельных свойств отступа наряду с padding-top, padding-left и padding-right.
Понимание padding-bottom полезно всякий раз, когда нужно задать точное вертикальное пространство под текстом или другим содержимым — не затрагивая окружающие элементы так, как это делал бы margin-bottom.
Отрицательные значения для padding-bottom не допускаются. Минимальное значение равно 0.
| Начальное значение | 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%"; |
Синтаксис
padding-bottom: <length> | <percentage> | initial | inherit;Свойство принимает одно значение. Использование сокращённого свойства padding с четырьмя значениями эквивалентно, но устанавливает все четыре стороны одновременно.
Значения
| Значение | Описание |
|---|---|
<length> | Фиксированный нижний отступ, выраженный в любой единице длины CSS (px, em, rem, pt, cm и др.). Начальное значение равно 0. |
<percentage> | Нижний отступ в виде процента от ширины (не высоты) содержащего блока. Это удивляет многих разработчиков — см. примечание ниже. |
initial | Сбрасывает свойство до его значения по умолчанию (0). |
inherit | Берёт вычисленное значение от родительского элемента. |
Процентные значения вычисляются относительно ширины содержащего блока, а не его высоты. Это справедливо для всех четырёх сторон отступа и определено спецификацией CSS. Это означает, что padding-bottom: 50% создаёт высоту, равную половине ширины контейнера — приём, использовавшийся для создания блоков с фиксированным соотношением сторон до появления свойства aspect-ratio.
Как padding-bottom влияет на макет
padding-bottom увеличивает общую высоту элемента. Точный расчёт зависит от действующего значения box-sizing:
content-box(по умолчанию):общая высота = height + padding-top + padding-bottom + border-top + border-bottom. Значениеpadding-bottomприбавляется к указанномуheight.border-box: указанное значениеheightвключает отступы и границы. Добавлениеpadding-bottomуменьшает область содержимого, а не увеличивает элемент.
Примеры
Базовое значение в пикселях
Наиболее распространённое использование — фиксированное количество пикселей под содержимым:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with px</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>padding-bottom: 40px</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Значение длины в сантиметрах
Можно использовать любую единицу длины CSS. Здесь применяется 2cm, что удобно для печатных таблиц стилей:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with cm</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>padding-bottom: 2cm</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Процентное значение
padding-bottom: 25% добавляет нижний отступ, равный 25% ширины содержащего блока. В этом примере он используется для создания простой визуальной карточки с пропорциональными отступами:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with %</title>
<style>
.card {
width: 300px;
border: 2px solid #1c87c9;
background: #e8f4fd;
padding-bottom: 25%; /* = 75px (25% of 300px) */
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
</style>
</head>
<body>
<div class="card">
<strong>Card title</strong>
<p>The bottom padding equals 25% of the card's width.</p>
</div>
</body>
</html>Использование em для масштабируемых отступов
Отступы на основе em масштабируются вместе с размером шрифта элемента, сохраняя пропорции при изменении размера шрифта:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with em</title>
<style>
.note {
font-size: 18px;
border-left: 4px solid #1c87c9;
padding-left: 12px;
padding-bottom: 1em; /* = 18px, matches font-size */
background: #f0f8ff;
}
</style>
</head>
<body>
<div class="note">
This note box uses <code>padding-bottom: 1em</code>. If you increase
the font size, the bottom padding grows proportionally.
</div>
</body>
</html>Сравнение box-sizing
Одинаковые значения height и padding-bottom ведут себя по-разному при content-box и border-box:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom and box-sizing</title>
<style>
.box {
width: 220px;
height: 80px;
padding-bottom: 40px;
border: 2px solid #333;
background: #d0e8ff;
margin-bottom: 12px;
color: #111;
font-size: 14px;
}
.content-box { box-sizing: content-box; } /* total height = 80+40+4 = 124px */
.border-box { box-sizing: border-box; } /* total height stays 80px */
</style>
</head>
<body>
<div class="box content-box">content-box — total height: 124px</div>
<div class="box border-box">border-box — total height: 80px</div>
</body>
</html>Связанные свойства
padding— сокращённое свойство, задающее все четыре стороны одновременно.padding-top— пространство над содержимым.padding-left— пространство слева от содержимого.padding-right— пространство справа от содержимого.margin-bottom— внешнее пространство под границей элемента (снаружи, а не внутри).box-sizing— управляет тем, включены ли отступы в объявленныеwidth/height.height— высота области содержимого, на которую влияетpadding-bottomв режимеcontent-box.