CSS стиль padding-bottom. Установка поля снизу с помощью padding-bottom
CSS стиль padding-bottom задает размер поля (расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое) снизу.
Краткая информация по CSS-свойству padding-bottom
Значение по умолчанию | 0 |
Наследуется | Нет |
Применяется | Ко всем элементам |
Правила написания свойства padding-bottom
padding-bottom: <размер>;
Величину левого поля можно указывать в пикселях (px), процентах (%), или других допустимых для CSS единицах.
Объектная модель
Объект.style.paddingBottom
Пример применения стиля padding-bottom
Проиллюстрируем работу padding-bottom на примере. Нам нужно, чтобы поле снизу было больше, чем с других сторон.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля padding-bottom</title>
<style>
article {
/* Параметры фона */
background: fffaba;
/* Параметры рамки */
border: 2px solid #000000;
/* Поля вокруг текста */
padding: 5px;
/* Поле снизу */
padding-bottom: 90px;
}
</style>
</head>
<body>
<article>
Нам нужно, чтобы поле снизу было больше,
чем с других сторон. В этом нам поможет
CSS свойство padding-bottom.
</article>
</body>
</html>
Вместо того, чтобы писать padding: 5px;
, а потом padding-bottom: 90px;
нам бы следовало написать padding: 5px 5px 90px;
. Так намного короче и показывает более высокий уровень верстки.