Свойство padding

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

Синтаксис

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

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

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

Пример

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

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Пример

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

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Пример

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

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Пример

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

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

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