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