Як padding впливає на розмір елемента в CSS

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

Як padding впливає на розмір елемента в CSS

Якщо задати елементу ширину width: 100px, це не завжди означає, що його фактична ширина буде 100px.

За замовчуванням у CSS ширина width визначає тільки ширину вмісту елемента. Якщо додати padding, він збільшить загальний розмір блоку.

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  padding: 25px;
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
}

❗ Важливо:

За стандартною моделлю CSS загальна ширина елемента обчислюється так: width + padding зліва + padding справа + border.

width — ширина області вмісту.
padding — внутрішні відступи навколо вмісту.
border — границя елемента.
Фактичний розмір може бути більшим за width.

📌 Завдання:

№1. Створіть два блоки однакової ширини.
№2. Додайте одному з блоків padding: 25px.
№3. Порівняйте їхні розміри.

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

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

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

#elem2 {
  padding: 25px;
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
}