padding

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

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

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

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

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

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

• padding-top
• padding-right
• padding-bottom
• padding-left

Синтаксис

/* Застосування до всіх чотирьох сторін */
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), або від контейнерного блока.

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

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

[ <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;

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

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

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

• Вступ до базової рамкової моделі CSS
• padding-top, padding-right, padding-bottom та padding-left.
• Відповідні логічні властивості: padding-block-start, padding-block-end, padding-inline-start та padding-inline-end, а також скорочення padding-block і padding-inline