# Свойство padding

Свойство `padding` устанавливает внутренний отступ элемента. Значением свойства служат любые единицы для размеров. По умолчанию каждый браузер может добавлять элементам различные отступы. Свойство является сокращением для свойств `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.

## Синтаксис

`селектор { padding: значение; }`

## Количество параметров

Свойство `padding` принимает `1`, `2`, `3` или `4` значения, перечисляемые через пробел:

Количество | Описание
--- | ---
`1` | Одно значение задает отступ со всех сторон элемента.
`2` | Первое значение задает отступ сверху и снизу, а второе - справа и слева.
`3` | Первое значение задает отступ сверху, второе - справа и слева, а третье - снизу.
`4` | Первое значение задает отступ сверху, второе - справа, третье - снизу, а четвертое - слева.

## Пример

В данном случае по умолчанию внутренний отступ будет нулевой и текст будет прижат к границе блока:

`<div id="elem"> какой-то текст... </div>` `#elem { padding: 0; width: 300px; border: 1px solid black; text-align: justify; }`

:

## Пример

А теперь давайте сделаем внутренний отступ в `30px`:

`<div id="elem"> какой-то текст... </div>` `#elem { padding: 30px; width: 300px; border: 1px solid black; text-align: justify; }`

:

## Пример

Сейчас отступ сверху и снизу будет `20px`, а справа и слева - `5px`:

`<div id="elem"> какой-то текст... </div>` `#elem { padding: 20px 5px; width: 300px; border: 1px solid black; text-align: justify; }`

:

## Пример

Сейчас отступ сверху `5px`, справа - `15px`, снизу - `25px`, слева - `35px`:

`<div id="elem"> какой-то текст... </div>` `#elem { padding: 5px 15px 25px 35px; width: 300px; border: 1px solid black; text-align: justify; }`

:

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

- свойство `margin`,
  которое задает внешний отступ

←→
↑