Урок 129 із 239
54%
← Назад

Робота з відступами padding в CSS

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

Робота з відступами padding в CSS

Ми вже розглянули властивість margin, яка створює зовнішні відступи за межами границі елемента.

Властивість padding працює схожим чином, але створює внутрішній відступ між вмістом елемента та його границею.


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

#elem {
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}
#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}
❗ Важливо:

Головна різниця: margin створює відступ зовні елемента, а padding — всередині елемента.

  • padding-top — внутрішній відступ зверху.
  • padding-right — внутрішній відступ справа.
  • padding-bottom — внутрішній відступ знизу.
  • padding-left — внутрішній відступ зліва.
📌 Завдання:
  1. №1. Створіть блок із текстом та границею.
  2. №2. Додайте padding: 30px.
  3. №3. Змініть значення padding та перевірте, як змінюється відстань між текстом і границею.
💡 Показати підказку

Спробуйте порівняти padding та margin: один рухає вміст усередині, інший створює відстань між елементами.

✅ Показати відповідь
#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}