Курсы по SASS
Менторство: 200$ за курс. Репетиторство: 20$ за занятие. Жми для подробностей!
169 of 313 menu
Бесплатный курс: Практика на Реальных Проектах и Работы в Портфолио! Начало 11 ноября. Жми для записи!

Свойство padding

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

Синтаксис

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

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

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

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

Пример

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

<div id="elem"> some long text </div> #elem { padding: 0; width: 300px; border: 1px solid black; text-align: justify; }

:

Пример

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

<div id="elem"> some long text </div> #elem { padding: 30px; width: 300px; border: 1px solid black; text-align: justify; }

:

Пример

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

<div id="elem"> some long text </div> #elem { padding: 20px 5px; width: 300px; border: 1px solid black; text-align: justify; }

:

Пример

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

<div id="elem"> some long text </div> #elem { padding: 5px 15px 25px 35px; width: 300px; border: 1px solid black; text-align: justify; }

:

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

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