padding

CSS-властивість padding використовується для визначення внутрішніх відступів елемента, тобто відстані між вмістом елемента і його межами. Це дозволяє створювати простір всередині елемента, не змінюючи його загальну ширину або висоту. Властивість padding допомагає покращити візуальний вигляд елементів, а також дає змогу точно контролювати відстань між контентом і межами елемента.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США

Синтаксис

padding: <length> | <percentage>;

Значення

  • <length> — фіксоване значення відступу в одиницях виміру, таких як px, em, rem тощо.
  • <percentage> — відсоткове значення, яке залежить від розміру батьківського елемента. Наприклад, padding: 10% означає відступ, рівний 10% від ширини елемента.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • padding працює для всіх елементів, але найбільше використовується для блочних елементів, таких як div, section, article та інші.
  • Властивість padding може бути задана для кожного боку елемента окремо:
    • padding-top — відступ зверху.
    • padding-right — відступ справа.
    • padding-bottom — відступ знизу.
    • padding-left — відступ зліва.
  • Властивість padding може задаватися одним значенням для всіх чотирьох боків, двома значеннями (горизонтальний і вертикальний відступи), трьома або чотирма значеннями для кожного боку:
    • Одне значення: padding: 20px; — однаковий відступ з усіх боків.
    • Два значення: padding: 10px 20px; — перше значення — відступ зверху та знизу, друге — зліва та справа.
    • Три значення: padding: 10px 20px 30px; — перше значення — відступ зверху, друге — зліва та справа, третє — знизу.
    • Чотири значення: padding: 10px 20px 30px 40px; — значення для кожного боку: зверху, справа, знизу, зліва.
  • Властивість підтримується всіма сучасними браузерами.