CSS свойство padding - httpdoc.ru

CSS Padding

Свойство CSS Padding используется для определения пространства между содержимым и границей элемента. Он очищает область вокруг содержимого, в отличие от полей, которые очищают область вокруг элемента.

Вы можете изменить заполнение элемента по одному для каждой стороны или задать все сразу, используя сокращенное свойство.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Padding </title> 
  <meta charset="UTF-8">
</head>    
<style>
p{
  border: 1px solid black;
  background-color: #a78f3d;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
 }
</style>
</head>

<body>
<h2>Using individual padding properties</h2>
<p>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, 
and a left padding of 80px.</p>
</body>
</html>

Выход

CSS Padding Examples

Этот элемент div имеет верхний отступ 50 пикселей, правый отступ 30 пикселей, нижний отступ 50 пикселей и левый отступ 80 пикселей.


Сокращенные свойства заполнения CSS


Если даны четыре значения: Если даны три значения:
отступ: 25 пикселей, 50 пикселей, 75 пикселей, 100 пикселей; отступ: 25 пикселей, 50 пикселей, 75 пикселей;
верхний отступ - 25 пикселей верхний отступ - 25 пикселей
правый отступ - 50 пикселей отступы слева и справа - 50 пикселей
нижний отступ 75 пикселей нижний отступ 75 пикселей
отступ слева - 100 пикселей
Если даны два значения: Если дано одно значение:
отступ: 25 пикселей 50 пикселей; отступ: 25 пикселей;
верхнее и нижнее отступы - 25 пикселей все четыре отступа - 25 пикселей
отступы слева и справа - 50 пикселей