Кілька значень у властивості padding в CSS

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

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

У таких випадках padding працює за тим самим правилом, що й властивість margin.

Одне значення — задає однаковий внутрішній відступ з усіх сторін.
Два значення — перше для верхньої та нижньої сторони, друге для лівої та правої.
Три значення — перше зверху, друге зліва і справа, третє знизу.
Чотири значення — зверху, справа, знизу, зліва.

#elem {
  padding: 20px;
}

#elem {
  padding: 10px 20px;
}

#elem {
  padding: 10px 20px 30px;
}

#elem {
  padding: 10px 20px 30px 40px;
}

❗ Важливо:

Порядок значень padding повністю збігається з порядком значень margin.

📌 Завдання:

💡 Показати підказку

Запам'ятайте правило: 4 значення читаються як рух за годинниковою стрілкою — верх, право, низ, ліво.

✅ Показати відповідь

#elem {
  padding: 10px 20px 30px 40px;
}