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 одиницях. При вказівці поля в відсотках, значення розраховується від ширини батьківського елемента.

правити

Нотатка

Від'ємні значення не допускаються.

автор: NagarD правити

Нотатка

CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово auto.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

padding: length|initial|inherit;

Властивість padding може отримувати 4 значень:

length

Встановлює відстань поля у px, pt, cm та інших одиниця, що прийняті в CSS.

автор: NagarD

правити

%

Встановлює відступ у відсотках відносно ширини елементу.

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
padding	1.0	1.0	1.0	3.5	4.0

Підтримка: мобільні переглядачі

Переглядач
padding	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<p>Відступи: 2cm 4cm 3cm 4cm.</p>

p {
    padding: 2cm 4cm 3cm 4cm;
    border: 2px solid #0172ad;
    background: #eef6ff;
}