css властивість padding


Властивість padding - задає відступ навколо вмісту елемента (тобто, задає відстань між кордоном елемента та уявним прямокутником, котрий обмежує текст).

padding та ширина елемента

Якщо елемент має визначену ширину, будь-яке додавання відступів до нього збільшить його ширину. Це часто непотрібна поведінка, оскільки вона вимагає перерахування ширини елемента, а то й всього макету сторінки. Також така поведінка стосується і висоти елемента. Щоб розв'язувати цю проблему, таким чином щоб відступи не мали впливу на ширину елемента, ти можеш скористатися властивістю box-sizing. Задавши властивості box-sizing значення border-box ти помітиш, що елемент зберігає свою ширину, одночасно збільшуючи відступи, компенсуючи це доступним простором вмісту (область з текстом буде меншою), дивись другий приклад.

Властивість `padding`

Властивість 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 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово auto.

Синтакс

padding: length|initial|inherit;

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

length

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

%

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

initial

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

inherit

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

Значення без задання: 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.

Демонстрація роботи властивості

See the Pen padding by Володимир (@NagarD) on CodePen.

Створює різні відступи для всіх чотирьох сторін елемента.

p {
    padding: 2cm 4cm 3cm 4cm;
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів