Box Model та одиниці виміру

CSS Box Model — вкладені коробки як шари content, padding, border, margin

У минулому уроці ми навчилися змінювати кольори та шрифти. Але як керувати розмірами елементів та відступами між ними? Для цього потрібно зрозуміти Box Model — одну з найважливіших концепцій CSS.

Box Model — кожен елемент це коробка

У CSS кожен HTML-елемент — це прямокутна коробка. Ця коробка складається з чотирьох шарів:

CSS Box Model: margin, border, padding, content

Padding — внутрішній відступ

/* Однакові відступи з усіх боків */
.card {
  padding: 20px;
}

/* По окремих сторонах */
.card {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

/* Скорочений запис: top right bottom left (за годинниковою) */
.card {
  padding: 10px 20px 10px 20px;
}

/* Скорочення: vertical horizontal */
.card {
  padding: 10px 20px;
}

Margin — зовнішній відступ

Працює аналогічно до padding, але зовні елемента:

.card {
  margin: 20px;          /* з усіх боків */
  margin: 10px 20px;     /* vertical horizontal */
  margin: 0 auto;        /* центрування блоку! */
}

Схлопування margin

Важлива особливість: вертикальні margin сусідніх елементів не складаються, а схлопуються — використовується більший:

.first { margin-bottom: 20px; }
.second { margin-top: 30px; }
/* Відстань між ними: 30px (не 50px!) */

Border — рамка

/* Скорочений запис: width style color */
.card {
  border: 2px solid #333;
}

/* Окремі сторони */
.card {
  border-bottom: 3px solid #e94560;
}

/* Заокруглення кутів */
.card {
  border-radius: 8px;      /* трохи заокруглено */
  border-radius: 50%;       /* коло (для квадратних елементів) */
}

Стилі рамок: solid (суцільна), dashed (штрихова), dotted (точкова), none (без рамки).

box-sizing — як рахувати розмір?

За замовчуванням width задає розмір тільки content. Padding та border додаються зверху:

/* content-box (за замовчуванням) */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Реальна ширина: 200 + 20 + 20 + 2 + 2 = 244px 😱 */
}

Це незручно. Рішення — border-box:

/* border-box — padding і border включені в width */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Реальна ширина: 200px ✅ */
}

Додай це на початок кожного проєкту:

*, *::before, *::after {
  box-sizing: border-box;
}

Одиниці виміру

Абсолютні

Відносні

px vs rem — що обирати?

/* px — фіксований розмір */
h1 { font-size: 32px; }

/* rem — масштабується з налаштуваннями користувача */
h1 { font-size: 2rem; }  /* 2 × 16px = 32px */

rem краще для шрифтів та відступів, бо якщо користувач збільшить базовий розмір шрифту у браузері — все масштабується пропорційно.

Практичне правило:

• rem — шрифти, padding, margin
• % — ширина контейнерів
• px — border, box-shadow, дрібні деталі
• vh/vw — повноекранні секції

Практика: картка товару

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 2rem;
}

.card {
  width: 300px;
  margin: 0 auto;
  padding: 1.5rem;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.card h2 {
  margin-top: 0;
  color: #1a1a2e;
}

.card p {
  color: #666;
  line-height: 1.6;
}

.card .price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e94560;
}

<div class="card">
  <h2>Курс "HTML & CSS"</h2>
  <p>Навчися створювати красиві веб-сторінки з нуля за 7 тижнів.</p>
  <p class="price">999 ₴</p>
</div>

Подивись результат — це вже виглядає як справжній компонент!

Підсумок

• Box Model: content → padding → border → margin
• Padding — внутрішній відступ, margin — зовнішній
• box-sizing: border-box — padding і border входять у width (завжди додавай!)
• margin: 0 auto — центрування блоку
• Одиниці: rem для шрифтів, % для ширини, px для border, vh/vw для повноекранних

Що далі?

У наступному уроці вивчимо типографіку — як працювати зі шрифтами, підключати Google Fonts та створювати читабельний текст.