padding

Властивість-скорочення CSS padding (набивка) встановлює розмах внутрішніх відступів з усіх чотирьох сторін елемента за раз.

Спробуйте його в дії

Розмах внутрішніх відступів елемента – простір між елементом та його межами.

[!NOTE] Зовнішні відступи створюють додатковий простір всередині елемента. На відміну від них, зовнішні відступи створюють додатковий простір навколо елемента.

Складові властивості

Ця властивість є скороченням для наступних властивостей CSS:

Синтаксис

/* Застосування до всіх чотирьох сторін */
padding: 1em;

/* згори та знизу | зліва та справа */
padding: 5% 10%;

/* згори | зліва та справа | знизу */
padding: 1em 2em 2em;

/* згори | справа | знизу | зліва */
padding: 5px 1em 0 2em;

/* Глобальні значення */
padding: inherit;
padding: initial;
padding: revert;
position: revert-layer;
padding: unset;

Властивість padding (набивка) може бути вказана за допомогою одного, двох, трьох чи чотирьох значень. Кожне значення – <length> (довжина) або <percentage> (відсотки). Від'ємні значення є недійсними.

  • Коли вказано одне значення, то однакові внутрішні відступи застосовуються на всіх чотирьох сторонах.
  • Коли вказано два значення, то перше застосовується як ширина відступу згори та внизу, а друге – зліва та справа.
  • Коли вказано три значення, то перше застосовується як ширина відступу згори, друге – зліва та справа, а третє – знизу.
  • Коли вказано чотири значення, то вони використовуються як ширини відступу, відповідно, згори, справа, знизу та зліва (за годинниковою стрілкою).

Значення

<length> (довжина)

Розмір внутрішнього відступу як фіксоване значення.

<percentage>

Розмір внутрішнього відступу як відсоток від його розміру в рядку (ширини в горизонтальному письмі, означеному у writing-mode), або від контейнерного блока.

Формальне визначення

Початкове значеннятак як і всі інші властивості зі скорочення:
Успадковуєтьсяні
Обчислене значеннятак як і всі інші властивості зі скорочення:
  • padding-bottom: the percentage as specified or the absolute length
  • padding-left: the percentage as specified or the absolute length
  • padding-right: the percentage as specified or the absolute length
  • padding-top: the percentage as specified or the absolute length

Формальний синтаксис

[ <length> | <percentage> ]{1,4}

Приклади

Встановлення внутрішніх відступів у пікселях

HTML

<h4>Цей елемент має внутрішні відступи помірних розмірів.</h4>
<h3>Внутрішні відступи у цьому елементі – велетенські!</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

Результат

Встановлення внутрішніх відступів у пікселях та відсотках

/* З кожної сторони: 5% внутрішнього відступу */
padding: 5%;

/* З кожної сторони: 10px внутрішнього відступу */
padding: 10px;

/* згори та знизу: 10px внутрішнього відступу */
/* зліва та справа: 20px внутрішнього відступу */
padding: 10px 20px;

/* згори:           10px внутрішнього відступу */
/* зліва та справа: 3% внутрішнього відступу   */
/* знизу:           20px внутрішнього відступу */
padding: 10px 3% 20px;

/* згори:  1em внутрішнього відступу  */
/* справа: 3px внутрішнього відступу  */
/* знизу:  30px внутрішнього відступу */
/* зліва:  5px внутрішнього відступу  */
padding: 1em 3px 30px 5px;

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
padding
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0

Дивіться також