Відступи padding для різних сторін в CSS

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

Відступи padding для різних сторін в CSS

Для внутрішніх відступів, так само як і для зовнішніх, існують окремі властивості для кожної сторони елемента.

За допомогою padding-top, padding-right, padding-bottom та padding-left можна задати різні відступи між текстом і границею блоку.

padding-top — внутрішній відступ зверху.
padding-right — внутрішній відступ справа.
padding-bottom — внутрішній відступ знизу.
padding-left — внутрішній відступ зліва.

<div id="elem">
  some long text
</div>

#elem {
  padding-top: 10px; /* зверху */
  padding-right: 20px; /* справа */
  padding-bottom: 30px; /* знизу */
  padding-left: 40px; /* зліва */

  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

❗ Важливо:

На відміну від margin, властивість padding збільшує відстань між вмістом елемента та його границею.

📌 Завдання:

№1. Створіть блок із текстом та границею.
№2. Задайте різні значення для padding кожної сторони.
№3. Змініть значення padding та перевірте результат.

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

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

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

#elem {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}