Модуль 9

Box model: margin, padding, border

Ось урок, написаний у стилі лекцій CS50. Уявіть, що ви сидите в Sanders Theatre у Гарварді, а я ходжу сценою, активно жестикулюю і пояснюю вам магію CSS.

📦 CS50: Box Model (Margin, Padding, Border)

1. 🔥 Вступ: проблема та мотивація

Всім привіт! 👋

Уявіть собі ситуацію. Ви щойно написали свій перший HTML-код. Ви додали заголовок, кнопку «Купити», гарну картинку. Ви відкриваєте браузер, очікуючи побачити шедевр, а бачите… хаос.

Текст «прилип» до самого краю екрана. Кнопка така маленька, що в неї неможливо влучити пальцем. Два абзаци злиплися, ніби вони бояться холоду. Виглядає це, м'яко кажучи, непрофесійно.

Чому так сталося?

Тому що браузер за замовчуванням економить місце. Він не знає, що вам потрібне «повітря».

Замисліться на секунду: як ми сприймаємо об'єкти в реальному світі? Коли ви вішаєте картину на стіну, ви ж не тулите її впритул до стелі чи до іншої картини, правда? Ви залишаєте простір. А сама картина? Вона має раму. А між рамою і полотном часто є ще паспарту (білий картонний відступ).

У вебі все працює так само. Без розуміння того, як керувати простором, ваші сайти завжди виглядатимуть як зламаний документ Word.

Сьогодні ми розберемося з фундаментом дизайну — Box Model (Блокова модель). Поїхали!

2. 🧠 Теоретична база: «Все є коробкою»

Ось головний секрет, який ви маєте усвідомити просто зараз:

В HTML кожен елемент — це прямокутна коробка.

Навіть якщо це кругла кнопка, текст чи літери — браузер бачить це як прямокутник. І у цього прямокутника є шари, як у цибулини (або як у огра (с)).

Давайте розберемо ці шари зсередини назовні.

1. Content (Вміст)

Це серце нашої коробки. Текст, картинка, відео. Те, заради чого елемент існує. * Width (ширина) і Height (висота) зазвичай задають розмір саме цього шару.

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

Уявіть, що ви відправляєте крихку вазу поштою. Ви кладете її в коробку. Але щоб вона не розбилася, ви обкладаєте її пінопластом або "пупиркою". Оця "пупирка" — це Padding. * Це простір між вмістом і межею (border). * Важливо: Padding приймає колір фону елемента. Він розширює візуальний розмір вашої кнопки.

3. Border (Межа / Рамка) 🚧

Це стінки вашої поштової коробки. * Вона йде навколо padding'у. * Вона може бути тонкою, товстою, пунктирною або невидимою.

4. Margin (Зовнішній відступ) ↔️

А тепер уявіть, що ваша коробка стоїть на складі поруч з іншими коробками. Ви не хочете, щоб вони терлися одна об одну. Ви відсуваєте їх. * Margin — це простір зовні коробки. * Це «особистий простір» елемента. Він штовхає сусідів. * Важливо: Margin завжди прозорий. У нього немає кольору.

⚙️ "Під капотом": Проблема математики

У CSS є історичний казус. За замовчуванням, коли ви кажете width: 200px, браузер робить ширину контенту 200px. Якщо ви додасте padding: 20px і border: 5px, то реальна ширина елемента на екрані стане: 200 + 20 (ліво) + 20 (право) + 5 (ліво) + 5 (право) = 250px.

Це зводить з розуму розробників! Ви хотіли коробку 200 пікселів, а отримали 250.

Рішення (запам'ятайте цей рядок на все життя):

* {
  box-sizing: border-box;
}

Ця магічна команда каже браузеру: «Якщо я кажу 200px, значить, загальна ширина з рамками і відступами має бути 200px. Стисни контент, але збережи розмір коробки». Це стандарт індустрії.

3. 🧪 Приклади (від простого до реального)

Давайте подивимось на код.

Приклад 1: Кнопка «Натисни мене»

Уявіть кнопку без CSS. Просто текст у рамці. Тісно, некрасиво. Що ми очікуємо, якщо додамо padding?

<button class="ugly-btn">Без відступів</button>
<button class="nice-btn">З Padding</button>

.ugly-btn {
  border: 1px solid black;
  background-color: lightblue;
  /* Текст прилипне до країв */
}

.nice-btn {
  border: 1px solid black;
  background-color: lightgreen;
  padding: 15px 30px; /* 15px зверху/знизу, 30px зліва/справа */
}

Результат: .nice-btn стала більшою, «дихає», виглядає клікабельною. Padding додав "м'яса" всередині.

Приклад 2: Картка товару (Margin vs Padding)

У нас є дві картки товарів. Ми хочемо, щоб всередині картки текст не торкався країв, АЛЕ також хочемо, щоб самі картки не злиплися між собою.

<div class="card">Товар 1</div>
<div class="card">Товар 2</div>

.card {
  border: 2px solid #333;
  background-color: #f0f0f0;

  /* Внутрішній простір (щоб текст не лип до рамки) */
  padding: 20px; 

  /* Зовнішній простір (щоб картки відштовхували одна одну) */
  margin-bottom: 20px; 
}

Чому саме так? Якщо ви заміните margin на padding у другому випадку, картки злипнуться візуально, просто стануть товстішими. Margin — це єдиний спосіб розсунути об'єкти.

4. 🛠 Практична частина

А тепер ваша черга. Відкрийте редактор коду (або Codepen) і виконайте ці завдання. Не читайте далі, поки не спробуєте!

  1. 🔹 Створіть "Привида": Зробіть div з текстом. Задайте йому фон yellow. Тепер додайте margin: 50px.
    • Питання: Жовтий фон посунувся разом з текстом чи залишився на місці? (Це допоможе зрозуміти, що margin прозорий).
  2. 🔹 Кнопка-гігант: Створіть кнопку. Задайте їй padding: 50px. Що сталося з текстом всередині? Він все ще по центру?
  3. 🔹 Експеримент з рамкою: Додайте елементу border: 10px solid red. Тепер додайте padding: 20px. Де з'явилося червоне кільце — одразу навколо тексту чи на відстані?
  4. 🔹 Виправте помилку новачка:
    • Створіть два div з класом box.
    • Дайте їм width: 50%.
    • Додайте border: 1px solid black.
    • Спробуйте поставити їх в один рядок (display: inline-block або float: left).
    • Проблема: Вони не влазять в один рядок і перескакують вниз. Чому? (Підказка: 50% + 50% + 2px рамки > 100%).
    • Задача: Виправте це за допомогою box-sizing: border-box.
  5. 🔹 Міні-кейс: Вам потрібно зробити список новин. Між новинами має бути відстань 30px, а всередині кожної новини текст має відступати від краю на 15px. Напишіть CSS.

5. 💡 Мислення як у розробника

Як досвідчені інженери дивляться на Box Model?

  1. Помилка новачка №1: Плутанина Background. «Я хочу відсунути цей блок, додаю padding, але фон теж розтягується!».

    • Думка про: Якщо треба посунути сам об'єкт — це margin. Якщо треба збільшити площу об'єкта — це padding.

  2. Margin collapse (Злипання відступів). Це пастка! Якщо у верхнього блока margin-bottom: 20px, а у нижнього margin-top: 30px, відстань між ними НЕ буде 50px. Вона буде 30px. Браузер бере більше значення і накладає їх одне на одне. Просто знайте це, щоб не панікувати.

  3. Інструменти розробника (DevTools). Ви ніколи не повинні вгадувати. Натисніть F12 (або права кнопка -> Inspect/Перевірити) у браузері. Наведіть на елемент.

    • 🟧 Помаранчеве — це Margin.
    • 🟩 Зелене — це Padding.
    • Це ваш рентген. Використовуйте його постійно.

  4. Секретна зброя: Замість border, використовуйте outline: 1px solid red для налагодження. Outline не займає місця в box model і не ламає верстку, але показує межі елемента.

6. 🧩 Підсумок

Отже, що ми сьогодні розібрали?

  1. Все є коробкою. Навіть текст.
  2. Padding — це «пупирка» всередині (захищає контент, має фон).
  3. Border — це стінки коробки.
  4. Margin — це простір між коробками (штовхає сусідів, прозорий).
  5. box-sizing: border-box — це ваша страховка від математичного головного болю.

Тепер ви вмієте створювати елементи, які не виглядають злиплими. Ви керуєте простором, а не простір керує вами.

Що далі? Зараз наші коробки стоять одна під одною, як цеглини. Але як поставити їх поруч? Як зробити меню зліва, а контент справа? Як вибудувати складну сітку?

На наступному уроці ми зламаємо вертикальний потік і поговоримо про Flexbox. Це буде весело.

А поки що — практикуйтеся з відступами! 🚀

Це був CS50. (Музика на вихід)

← До списку уроків Наступний урок →