css властивість padding
Властивість padding - задає відступ навколо вмісту елемента (тобто, задає відстань між кордоном елемента та уявним прямокутником, котрий обмежує текст).
padding та ширина елемента
Якщо елемент має визначену ширину, будь-яке додавання відступів до нього збільшить його ширину. Це часто непотрібна поведінка, оскільки вона вимагає перерахування ширини елемента, а то й всього макету сторінки. Також така поведінка стосується і висоти елемента. Щоб розв'язувати цю проблему, таким чином щоб відступи не мали впливу на ширину елемента, ти можеш скористатися властивістю box-sizing. Задавши властивості box-sizing значення border-box ти помітиш, що елемент зберігає свою ширину, одночасно збільшуючи відступи, компенсуючи це доступним простором вмісту (область з текстом буде меншою), дивись другий приклад.
Властивість padding використовується для скороченого запису padding-top, padding-right, padding-bottom і padding-left, тому поведінка залежить від кількості вхідних значень:
| Кількість значень | Поведінка властивості |
|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| 1 | Відступи будуть встановлені для всіх сторін. |
| 2 | Перше значення встановить відступ зверху та знизу, друге - відступи праворуч та ліворуч. |
| 3 | Перше значення встановлює відступ зверху, друге значення одночасно,встановить лівий та правий відступи, третє значення - відступ знизу. |
| 4 | Послідовно встановить відступи для верхнього, правого, нижнього та лівого країв. |
Приклади:
padding:10px 5px 15px 20px;
- поле звеpxу 10px
- поле справа 5px
- поле знизу 15px
- поле зліва 20px
padding:10px 5px 15px;
- поле звеpxу 10px
- поля зліва та справа по 5px
- поле знизу 15px
padding:10px 5px;
- поля звеpxу та знизу по 10px
- поля злыва та справа по 5px
padding:10px;
- всі поля по 10px
Величину полів можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. При вказівці поля в відсотках, значення розраховується від ширини батьківського елемента.
| Нотатка: | Від'ємні значення не допускаються. |
| Нотатка: | CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово |
Синтаксис
padding: length|initial|inherit;Властивість padding може отримувати 4 значення:
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.padding="100px 20px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| padding | 1.0 |
4.0 |
1.0 |
1.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| padding | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
See the Pen width та padding by Володимир (@NagarD) on CodePen.
Створює різні відступи для всіх чотирьох сторін елемента.
p {
padding: 2cm 4cm 3cm 4cm;
}