CSS стиль padding. Установка поля с помощью padding

CSS стиль padding задает размер поля (расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое).

padding позволяет задать величину поля сразу для всех сторон блока, или только для указанных сторон.

Настольные Мобильные

Краткая информация по CSS-свойству padding

Значение по умолчанию	`0`
Наследуется	Нет
Применяется	Ко всем элементам

Правила написания свойства padding

padding: <размер> {1,4};

Величину правого поля можно указывать в пикселях (px), процентах (%), или других допустимых для CSS единицах.

Объектная модель

Объект.style.padding

Пример применения стиля padding

Проиллюстрируем работу padding на примере. Нам нужно, чтобы поле справа было больше, чем с других сторон. Это необходимо, чтобы текст не залезал на фоновый рисунок.

Применение свойства padding

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля padding</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.
  </article>
</body>
</html>