Оновлено: 19.05.2025

padding

Frontend CSS Властивості padding

Встановлює значення полів навколо вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).
 

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

 

📄 Коротка інформація

Значення за замовчуванням0
УспадковуєтьсяНі
ЗастосовуєтьсяДо всіх елементів
АнімуєтьсяТак

 

 

⌨️ Синтаксис

padding: [<Розмір> | <Відсотки>] {1, 4}

 

 

⚙️ Значення

Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх між собою пропуском. Ефект залежить від кількості значень і наведений у табл. 1.

Число значеньРезультат
1Поля будуть установлені одночасно з кожного краю елемента
2Перше значення встановлює поля від верхнього та нижнього країв, друге - від лівого та правого.
3Перше значення встановлює поле від верхнього краю, друге - одночасно від лівого та правого країв, а третє - від нижнього краю.
4По черзі встановлюється поле від верхнього, правого, нижнього та лівого країв.
Табл. 1. Залежність від числа значень

Величину полів можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. У разі зазначення поля у відсотках, значення рахується від ширини батьківського елемента.

 

 

📋 Приклад

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>padding</title>
   <style>
    .layer {
     background: #fc3; /* Background color */
     border: 2px solid black; /* Frame options */
     padding: 20px /* Margin around text */
    }
   </style>
  </head>
  <body>
   <div class="layer">Conductometry gently transmits the electronic mode
    obtaining, regardless of the consequences of penetration
    methylcarbiol inside.</div>
  </body>
</html>