Box Model

З поверненням.

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

Тепер ми знайомимося з однією з найважливіших ідей у CSS:

Box model.

Кожен елемент на веб-сторінці сприймається як коробка.

Заголовки?

Коробка.

Абзаци?

Коробка.

Зображення?

Коробка.

Кнопки?

Коробка.

Той невинний маленький div?

Точно коробка.

CSS дивиться на твою сторінку і бачить коробки всюди.

Як менеджер складу з дизайнерськими поглядами.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

що таке CSS box model;
що означає content;
що робить padding;
що робить border;
що робить margin;
як працюють width і height;
чому box-sizing важливий;
як створювати чисті cards;
як уникати типових проблем зі spacing.

Що Таке Box Model?

CSS box model описує, як працює простір навколо кожного елемента.

Кожна коробка має чотири головні частини:

content;
padding;
border;
margin.

Можна уявити це так:

margin
  border
    padding
      content

Content — це сам текст, зображення або реальний вміст елемента.

Padding — це простір всередині елемента.

Border — це лінія навколо елемента.

Margin — це простір зовні елемента.

Проста ідея.

Величезний вплив.

Як відкриття, що твої проблеми з layout — це не магія.

Це були коробки.

Коробки від самого початку.

Створи Проєкт

Створи папку для цього уроку:

mkdir css-lesson4
cd css-lesson4
touch index.html
touch style.css

Ти маєш отримати:

css-lesson4/
  index.html
  style.css

Відкрий папку у своєму editor.

Ми побудуємо маленьку сторінку з cards.

Cards ідеально підходять для вивчення box model.

Бо вони використовують padding, margin, border, width і іноді емоційну підтримку.

Напиши HTML

Відкрий index.html і додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Box Model</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>CSS Box Model</h1>
    <p>Кожен елемент — це коробка. Так, навіть той.</p>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Що Таке Box Model?</h2>
      <p>
        Box model пояснює, як CSS обчислює розмір і відступи елементів.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Content</h2>
        <p>Реальний текст, зображення або вміст всередині елемента.</p>
      </article>

      <article class="card">
        <h2>Padding</h2>
        <p>Простір між content і border.</p>
      </article>

      <article class="card">
        <h2>Border</h2>
        <p>Лінія навколо padding і content.</p>
      </article>

      <article class="card">
        <h2>Margin</h2>
        <p>Простір зовні елемента.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Створено під час вивчення CSS box model.</p>
  </footer>
</body>
</html>

Це дає нам:

header;
intro section;
чотири cards;
footer.

Тепер ми можемо стилізувати коробки.

І так, нарешті зрозуміємо, чому один margin може зіпсувати ранок.

Почни з Базових Стилів

Відкрий style.css і додай:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

Це створює базовий layout сторінки.

Зверни увагу:

margin: 40px auto;

Це центрує container .page горизонтально.

40px додає вертикальний простір.

auto керує простором зліва і справа.

CSS каже:

“Дай мені порахувати боки.”

І цього разу CSS справді допомагає.

Рідкісний момент. Поважаємо.

Content

Content — це внутрішня частина елемента.

Наприклад:

<article class="card">
  <h2>Content</h2>
  <p>Реальний текст, зображення або вміст всередині елемента.</p>
</article>

Текст всередині card — це content.

У CSS width і height зазвичай описують розмір content area.

Приклад:

.card {
  width: 300px;
}

Це означає, що content area має ширину 300px.

Але є маленька проблема.

Padding і border можуть збільшити фінальний видимий розмір.

Бо CSS любить сюрпризи.

Не завжди приємні сюрпризи.

Padding

Padding — це простір всередині елемента.

Він створює дихання між content і border.

Додай це:

.card {
  background-color: white;
  padding: 24px;
}

Тепер content не торкається країв.

Набагато краще.

Без padding текст сидить занадто близько до border.

Як людина, яка стоїть занадто близько і пояснює JavaScript closures.

Padding робить усе комфортнішим.

Можна задати padding для всіх сторін:

padding: 24px;

Або окремо:

padding-top: 20px;
padding-right: 24px;
padding-bottom: 20px;
padding-left: 24px;

Можна також використовувати shorthand:

padding: 20px 24px;

Це означає:

верх і низ: 20px;
ліво і право: 24px.

Дуже корисно.

Дуже часто використовується.

Border

Border — це лінія навколо елемента.

Додай це:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
}

Border має три частини:

border: width style color;

Приклад:

border: 2px solid #e5e7eb;

Це означає:

width: 2px;
style: solid;
color: #e5e7eb.

Можна створювати різні border styles:

border: 2px solid #2563eb;
border: 2px dashed #f97316;
border: 2px dotted #16a34a;

Borders корисні для розділення контенту.

Але не додавай border всюди.

Занадто багато borders роблять сторінку схожою на spreadsheet після нервового зриву.

Border Radius

Property border-radius заокруглює кути.

Додай:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Тепер cards виглядають м’якше.

Менш гостро.

Менш схоже на офіційний документ з 2004 року.

Можна використовувати маленькі або великі значення:

border-radius: 8px;
border-radius: 16px;
border-radius: 999px;

999px часто використовують для pill-shaped buttons.

Кнопка стає круглою і дружньою.

Ніби хоче, щоб її ввічливо натиснули.

Margin

Margin — це простір зовні елемента.

Додай це:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  margin-bottom: 20px;
}

Тепер між cards є простір.

Margin відділяє елементи один від одного.

Padding створює внутрішній комфорт.

Margin створює зовнішню дистанцію.

Важлива різниця.

Padding каже:

“Дай простір моєму content всередині мене.”

Margin каже:

“Дай мені простір від інших.”

Обидва потрібні.

Дуже по-людськи, якщо подумати.

Width і Height

Можна контролювати розмір елементів за допомогою width і height.

Приклад:

.card {
  width: 300px;
}

Але будь обережний з fixed widths.

Фіксовані ширини можуть створювати проблеми на маленьких екранах.

Часто краще використовувати:

.card {
  max-width: 300px;
}

Або для containers:

.page {
  max-width: 900px;
}

max-width означає:

Не ставай ширшим за це, але можеш бути меншим, якщо потрібно.

Це корисно для responsive design.

Browser отримує простір для дихання.

І твій layout не вибухає на телефонах.

Завжди хороша річ.

Проблема з Box-Sizing

За замовчуванням CSS використовує:

box-sizing: content-box;

Це означає:

width застосовується тільки до content;
padding додається зовні цієї width;
border додається зовні цієї width.

Приклад:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Фінальна видима ширина стає:

300px content
+ 40px padding
+ 4px border
= 344px total width

Це дивує багатьох початківців.

І деяких досвідчених developers.

І, мабуть, одну людину в підвалі, яка досі debug-ить layout з 2016 року.

Використовуй border-box

Більшість сучасних CSS-проєктів використовують це:

* {
  box-sizing: border-box;
}

Додай це на початок CSS:

* {
  box-sizing: border-box;
}

Тепер width включає:

content;
padding;
border.

Це робить розміри простішими.

Якщо ти напишеш:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Фінальна видима ширина залишається 300px.

Набагато передбачуваніше.

CSS стає трохи менш хаотичним.

Ми цінуємо цей рідкісний момент.

Стилізуй Layout Cards

Додай це:

.cards {
  display: grid;
  gap: 20px;
}

Не хвилюйся зараз занадто через Grid.

Ми вивчимо його пізніше.

Поки що просто запам’ятай:

gap: 20px;

створює простір між cards.

Це часто чистіше, ніж використовувати багато margins.

Тепер онови стиль card:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Оскільки .cards використовує gap, нам не потрібен margin-bottom на кожній card.

Чистіше.

Більш організовано.

Менше CSS spaghetti.

Стилізуй Intro Card

Додай:

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

Ця intro card використовує:

background color;
padding;
border;
border radius;
margin.

Це box model у дії.

Не теорія.

Справжній layout.

Коробка увійшла в будівлю.

Повний CSS

Твій style.css має виглядати так:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  gap: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

.card h2 {
  margin-top: 0;
}

.card p,
.intro-card p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.site-footer {
  text-align: center;
  padding: 24px;
  color: #6b7280;
}

Збережи файл.

Онови браузер.

Тепер ти маєш побачити чисті відступи і структуру cards.

Це працює box model.

Тихо.

За кулісами.

Як технічна команда, переодягнена в CSS properties.

Типові Помилки

Плутати margin і padding

Padding — всередині.

Margin — зовні.

Приклад:

.card {
  padding: 24px;
  margin-bottom: 20px;
}

padding дає простір всередині card.

margin-bottom дає простір після card.

Якщо текст занадто близько до краю card, використовуй padding.

Якщо cards занадто близько одна до одної, використовуй margin або gap.

Просто.

Але легко переплутати.

CSS любить перевіряти концентрацію.

Забути box-sizing

Без цього:

* {
  box-sizing: border-box;
}

Ширини можуть стати несподіваними.

Використовуй border-box у більшості проєктів.

Це робить layouts легшими для розуміння.

Твій майбутній ти подякує.

Можливо, навіть кавою.

Додавати забагато margin всюди

Погано:

h1 {
  margin: 50px;
}

p {
  margin: 50px;
}

.card {
  margin: 50px;
}

Забагато margin всюди створює хаос.

Використовуй spacing свідомо.

Не як кидання подушок у кімнату із заплющеними очима.

Практика

Створи сторінку з:

одним header;
однією intro box;
трьома cards;
одним footer.

Стилізуй кожну card за допомогою:

background color;
padding;
border;
border radius;
spacing між cards.

Використай:

box-sizing: border-box;

на початку CSS.

Потім експериментуй з:

збільшенням padding;
видаленням padding;
додаванням border;
зміною margin;
використанням gap.

Спостерігай, як змінюється layout.

CSS стає менш страшним, коли ти бачиш, що робить кожна property.

Міні-Завдання

Створи три pricing cards:

Basic;
Standard;
Premium.

Кожна card має мати:

title;
price;
короткий опис;
button link.

Використай box model, щоб їх стилізувати:

padding всередині cards;
border навколо кожної card;
margin або gap між cards;
border radius для м’якших кутів;
box-sizing: border-box.

Зроби Premium card помітнішою через інший колір border.

Не занадто.

Лише достатньо, щоб сказати:

“Я особлива.”

А не:

“Я втекла з карнавального плаката.”

Підсумок

Сьогодні ти дізнався, що:

кожен HTML element поводиться як коробка;
box model містить content, padding, border і margin;
content — це реальний текст або media;
padding створює простір всередині елемента;
border оточує padding і content;
margin створює простір зовні елемента;
width і height контролюють розмір;
default sizing може заплутувати;
box-sizing: border-box робить розміри простішими;
spacing — одна з найважливіших частин чистого дизайну.

Box model всюди.

Якщо ти його розумієш, CSS стає набагато легшим.

Якщо ігноруєш, твої layouts поводитимуться як бунтівні меблі.

А в житті вже достатньо бунтівних меблів.

Наступний Урок

У наступному уроці ми вивчимо Flexbox.

Flexbox допомагає вирівнювати й організовувати елементи в одному напрямку.

Rows.

Columns.

Центровані речі.

Нарешті CSS допоможе нам розставляти елементи без виклику древніх духів.