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
), або від контейнерного блока.
Формальне визначення
Початкове значення | так як і всі інші властивості зі скорочення: |
---|---|
Успадковується | ні |
Обчислене значення | так як і всі інші властивості зі скорочення:
|
Формальний синтаксис
[ <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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |