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