Вплив границі на розширення елементів у CSS

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

Вплив границі на розширення елементів у CSS

Границя (border) також збільшує фактичний розмір елемента, так само як і внутрішній відступ padding.

Якщо елементу задано width: 100px, додавання границі збільшить його загальну ширину.

<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;
  border: 10px solid green;
}

❗ Важливо:

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

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

📌 Завдання:

№1. Створіть два блоки однакового розміру.
№2. Додайте другому блоку border: 10px solid green.
№3. Порівняйте розміри блоків.

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

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

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

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