Скасування розширення елементів у CSS

Вивчаємо властивість box-sizing зі значенням border-box, яка дозволяє включити padding і border у задані розміри елемента.

Скасування розширення елементів у CSS

За стандартною моделлю CSS додавання padding і border збільшує фактичний розмір елемента.

У більшості випадків таке розширення незручне, тому в CSS існує властивість box-sizing.

Якщо встановити box-sizing: border-box, то padding і border будуть враховуватися всередині заданої ширини та висоти елемента.

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

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

#elem2 {
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
  padding: 25px;
  border: 10px solid green;
  box-sizing: border-box;
}

❗ Важливо:

Зі значенням border-box ширина і висота включають content, padding та border.

content-box — стандартне значення, padding і border збільшують розмір.
border-box — padding і border входять у задані width та height.

📌 Завдання:

№1. Створіть блок width: 100px.
№2. Додайте padding і border та перевірте, як змінився розмір.
№3. Додайте box-sizing: border-box та порівняйте результат.

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

У сучасній верстці часто встановлюють box-sizing: border-box для всіх елементів через універсальний селектор.

* {
  box-sizing: border-box;
}

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

#elem2 {
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
  padding: 25px;
  border: 10px solid green;
  box-sizing: border-box;
}