Summary  
This chapter explains the CSS box model concept, detailing how content, padding, border, and margin layers combine to determine an element’s total dimensions and spacing.

General domain of usage  
Web page layout and design

Watch this video to see how the box model works in real web layouts. You'll learn how content, padding, border, and margin interact, and how changing these values affects the size and spacing of elements in general. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

HTML-елементи відображаються у вигляді прямокутних блоків на веб-сторінці. Кожен елемент має власну область вмісту, внутрішній відступ (padding), рамку (border) та зовнішній відступ (margin).

## Чотири частини блочної моделі


### Вміст
Область вмісту містить текст, зображення або інші елементи.
Це видима внутрішня частина елемента.


### Внутрішній відступ (Padding)
Внутрішній відступ — це простір між вмістом і рамкою.
Забезпечує внутрішнє віддалення.
```css
.box {
  padding: 20px;
}
```
Внутрішній відступ збільшує видимий розмір елемента.


### Рамка (Border)
Рамка оточує внутрішній відступ і вміст.
```css
.box {
  border: 4px solid darkblue;
}
```
За замовчуванням ширина рамки дорівнює 0, а колір рамки відповідає кольору тексту, якщо не вказано інше.


### Зовнішній відступ (Margin)
Зовнішній відступ — це простір поза рамкою.
Забезпечує відстань між елементами.
```css
.box {
  margin: 40px;
}
```
Зовнішній відступ не впливає на колір фону елемента.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJwYWdlIj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4KICAgICAgICA8cCBjbGFzcz0icXVvdGUiPgogICAgICAgICAgIktub3dpbmcgeW91cnNlbGYgaXMgdGhlIGJlZ2lubmluZyBvZiBhbGwgd2lzZG9tLiIgLSBBcmlzdG90bGUKICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwouYm94IHsKICBtYXJnaW46IDQwcHg7IC8qIFNwYWNlIG91dHNpZGUgdGhlIGVsZW1lbnQgKi8KICBib3JkZXI6IDRweCBzb2xpZCBkYXJrYmx1ZTsgLyogVmlzaWJsZSBlZGdlICovCiAgcGFkZGluZzogMjBweDsgLyogU3BhY2UgaW5zaWRlIHRoZSBlbGVtZW50ICovCiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7IC8qIFNob3dzIHRoZSBwYWRkZWQgYXJlYSAqLwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKICBtYXJnaW46IDA7Cn0KCi5wYWdlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CiAgcGFkZGluZzogMTBweDsKfQoKLnF1b3RlIHsKICBmb250LXNpemU6IDE4cHg7CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBjb2xvcjogIzMzMzsKICBtYXJnaW46IDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9

У цьому прикладі:
- Фон заповнює область вмісту та відступу (padding);
- Межа (border) їх оточує;
- Зовнішній відступ (margin) створює простір поза межами блоку.

За замовчуванням деякі елементи мають встановлені властивості `padding` і `margin`. Це зроблено для забезпечення читабельності вебсторінки навіть без додаткових стилів.

Примітка

Модель коробки визначає, скільки простору займає елемент на сторінці.

Загальний розмір елемента залежить від розміру вмісту, внутрішніх відступів (padding), рамки (border) та зовнішніх відступів (margin).

Важливо

Опануйте основи CSS — мови стилізації, яка змінює зовнішній вигляд і сприйняття вебсторінок. Дослідіть ключові концепції, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Розвивайте навички створення візуально привабливих і структурованих вебсторінок.

Зрозумійте, як CSS підключається до HTML і як стилі застосовуються за допомогою селекторів. Використання кольорів, стилізація тексту та ефекти наведення для керування візуальним оформленням.

Покращення типографіки за допомогою міжрядкового інтервалу, відступів, властивостей шрифтів і користувацьких шрифтів. Керування сімействами шрифтів, товщиною, стилем і розміром для підвищення читабельності.

Керування структурою макета за допомогою властивостей margin, padding, borders і width. Розуміння поведінки визначення розміру блоку та типів відображення елементів, таких як block, inline і inline-block.

Керування горизонтальними та вертикальними макетами за допомогою властивостей Flexbox. Налаштування напрямку, вирівнювання та відступів для структурування компонентів інтерфейсу користувача.

Покращення макетів за допомогою фонових кольорів, зображень, псевдоелементів і тіней. Оформлення візуальних компонентів для створення глибини та контрасту.

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

Чотири частини блочної моделі

Вміст

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

Рамка (Border)

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