Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО PADDING

Свойство padding устанавливает внутренний отступ (отбивка) для каждого края элемента. Свойства padding-left, padding-top, padding-right и padding-bottom устанавливают отбивку для левого, верхнего, правого и нижнего краёв соответственно.

У свойства padding может быть как одно, так и два, три и четыре значения разделённых пробелами. Одно значение устанавливает одинаковую отбивку для всех сторон. В случае двух значений будет установлена отбивка сверху-снизу и справа-слева соответственно. В случае трёх значений будет установлена отбивка сверху, справа-слева и снизу соответственно. В случае четырёх значений будет установлена отбивка сверху, справа, снизу и слева соответственно (по часовой стрелке).

Поддержка браузеров

Синтаксис

padding: единицы измерения|проценты|initial|inherit;
padding-left: единицы измерения|проценты|initial|inherit;
padding-top: единицы измерения|проценты|initial|inherit;
padding-right: единицы измерения|проценты|initial|inherit;
padding-bottom: единицы измерения|проценты|initial|inherit;

Значения свойства

Значение	Описание
единицы измерения	Определяет отбивку в px, pt, em и др. Значение по умолчанию равно 0. Подробнее о единицах измерения в CSS.
проценты	Определяет поле в процентах от ширины родительского элемента.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="block">Без отбивки</div><br>
<div class="block block-2">padding: 20px</div><br>
<div class="block block-3">padding: 10px 0 30px 45px</div><br>
<div class="block block-4">padding-left: 15px</div><br>
<div class="block block-5">padding-top: 25px</div><br>
<div class="block block-6">padding-right: 10px</div><br>
<div class="block block-7">padding-bottom: 10px</div>

HTML

.block {
  display:inline-block;
  margin-bottom: 20px;
  background: #ddd
}

.block-2 {
  padding: 20px
}

.block-3 {
  padding: 10px 0 30px 45px
}

.block-4 {
  padding-left: 15px
}

.block-5 {
  padding-top: 25px
}

.block-6 {
  padding-right: 10px
}

.block-7 {
  padding-bottom: 10px
}

CSS

← Перейти к списку свойств