Практичне Розуміння Блочної Моделі

Кожен елемент на веб-сторінці відображається у вигляді прямокутної коробки. Кожна коробка складається з чотирьох частин:

• Вміст: фактичний текст або елементи;
• Відступи (padding): простір всередині елемента;
• Рамка (border): оточує вміст і відступи;
• Зовнішній відступ (margin): простір поза елементом.

Візуальна структура

Margin → Border → Padding → Content. Загальний розмір елемента залежить від усіх цих частин.

Вміст

Видима частина елемента: текст, зображення або інші елементи.

Внутрішній відступ (Padding)

Створює простір між вмістом і рамкою.

.box {
  padding: 20px;
}

Скорочений запис

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Зовнішній відступ (Margin)

Створює простір між елементами.

.box {
  margin: 20px;
}

Скорочений запис

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Межа (Border)

Визначає край елемента.

.box {
  border: 4px solid darkblue;
}

Ключова відмінність

• Padding → внутрішній простір (впливає на фон);
• Margin → зовнішній простір (не впливає на фон).

Визначення розміру коробки

Керує тим, як обчислюються ширина та висота.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + border додаються до розміру;
• border-box: усе включено в розмір.

У реальних проєктах перевага надається border-box.