padding
=======

Обзор
-----

Свойство **`padding`** устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.

Свойство `padding` краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`).

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `padding-bottom` (en-US): `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top` (en-US): `0`
 |
| Применяется к | все элементы, кроме `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` и `table-column`. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `padding-bottom` (en-US): процент, как указан, или абсолютная длина
* `padding-left`: процент, как указан, или абсолютная длина
* `padding-right`: процент, как указан, или абсолютная длина
* `padding-top` (en-US): процент, как указан, или абсолютная длина
 |
| Animation type | длина |

Синтаксис
---------


```css
/\* Применяется для всех 4 сторон \*/
padding: 1em;

/\* По вертикали | По горизонтали \*/
padding: 5% 10%;

/\* Сверху | По горизонтали | Снизу \*/
padding: 1em 2em 2em;

/\* Сверху | Справа | Снизу | Слева \*/
padding: 2px 1em 0 1em;

/\* Глобальные значения \*/
padding: inherit;
padding: initial;
padding: unset;
```

### Значения

Укажите одно, два, три или четыре следующих значения:

`<length>`

Устанавливает неотрицательный, фиксированный размер. Подробнее в разделе `<length>`.

`<percentage>`

Относительно ширины родительского блока.

* **Одно** значение применяется ко всем четырём сторонам
* **Два** значения применяются: **1.** *верхняя и нижняя* и **2.** *левая и правая* стороны
* **Три** значения применяются: **1.** *верхняя*, **2.** *левая и правая* и **3.** *нижняя* стороны
* **Четыре** значения применяются\*\*:\*\* **1.** *верхняя*, **2.** *правая*, **3.** *нижняя* и **4.** *левая* стороны
### Формальное описание синтаксиса
```

padding =   
  <'padding-top'>{1,4} (en-US)    
  
```

Примеры
-------


```css
padding: 5%; /\* со всех сторон отступ 5% \*/
```



```css
padding: 10px; /\* со всех сторон отступ 10px \*/
```



```css
padding: 10px 20px;
/\* сверху и снизу отступ 10px \*/
/\* слева и справа отступ 20px \*/
```



```css
padding: 10px 3% 20px;
/\* сверху отступ 10px \*/
/\* слева и справа отступ 3% \*/
/\* снизу отступ 20px \*/
```



```css
padding: 1em 3px 30px 5px;
/\* сверху отступ 1em \*/
/\* справа отступ 3px \*/
/\* снизу отступ 30px \*/
/\* слева отступ 5px \*/
```


border:outset; padding:5% 1em;

Рабочий пример
--------------

### HTML


```html
<h4>Hello world!</h4>
<h3>The padding is different in this line.</h3>
```

### CSS


```css
h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3 {
  background-color: blue;
  padding: 400px 50px 50px 400px;
}
```

Спецификации
------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-shorthand |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* CSS Box Model