css властивість padding-bottom
Властивість padding-bottom встановлює значення поля від нижнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.

Ви також можете використовувати властивість padding для скороченого запису padding-top, padding-right, padding-bottom і padding-left.
Якщо елемент має вказану ширину, будь-яке додавання до цього елемента полів, буде збільшувати його загальну ширину, що часто є небажаним результатом.
Щоб вирішити цю проблему, зберігаючи встановлену ширину елемента, незалежно від розміру полів, ви можете скористатись властивістю box-sizing.
- Нотатка
-
Від'ємні значення не допускаються.
автор: Svitlana - Нотатка
-
CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово
автор: Svitlanaauto.
Синтаксис
padding-left: length|initial|inherit;
Властивість padding-bottom може отримувати 4 значень:
-
length -
Встановлює відстань поля у
автор: Svitlanapx, pt, cmта інших одиниця, що прийняті в CSS. -
% -
Встановлює відступ у відсотках відносно ширини елементу.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.paddingBottom="50px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| padding-bottom | 1.0 | 1.0 | 1.0 | 3.5 | 4.0 |
| Переглядач | |||
|---|---|---|---|
| padding-bottom | 1.0 | 1.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Внутрішній відступ 2см лише знизу — тло тягнеться вниз разом із ним, порівняй зі звичайним абзацом.
HTML
<p class="pad">Абзац із відступом 2см знизу.</p>
<p>Звичайний абзац.</p>
CSS
p {
border: 1px solid #0172ad;
background: #eef6ff;
}
.pad {
padding-bottom: 2cm;
}
Динамічний приклад
Демонстрація роботи властивості
Як задати нижнє поле для елементу за допомогою властивості padding-bottom.
Коментарі
Коментарів ще немає — будьте першим!