EasyCode365EasyCode365

Опановуємо CSS box model

Кожен HTML-елемент обробляється як прямокутна коробка.

Заголовки, абзаци, кнопки, зображення і картки працюють за цією самою ідеєю. Якщо ти розумієш, як працюють ці коробки, керувати відступами і макетом стає значно легше.

CSS box model пояснює, як поєднуються контент, padding, рамки і margins.

Що таке CSS box model

CSS box model — це набір правил, який керує розміром і відступами елемента.

Уяви фотографію в рамці:

  • Фотографія — це контент.
  • Простір навколо фотографії — це padding.
  • Рамка — це border.
  • Порожній простір стіни навколо рамки — це margin.

Коли макет виглядає дивно, box model часто є першим місцем для перевірки.

CSS box model

Область контенту

Область контенту — це внутрішня частина коробки.

Тут знаходяться текст, зображення або дочірні елементи.

Можна редагувати
<p class="bio-text">Привіт, мене звати Alex.</p>

<style>
  .bio-text {
    width: 200px;
    background-color: yellow;
  }
</style>

Контент абзацу обмежений шириною 200px.

Використовуй width, коли хочеш, щоб текст або медіа поміщалися в конкретний простір.

Будь обережним із фіксованою висотою для тексту. Якщо текст переноситься на більше рядків, він може вилізти за межі коробки.

Padding

Padding — це простір усередині коробки.

Він знаходиться між контентом і рамкою. Фон елемента за замовчуванням видно крізь padding.

Можна редагувати
<div class="alert-box">Попередження: збережи свою роботу!</div>

<style>
  .alert-box {
    background-color: yellow;
    padding: 20px;
  }
</style>

Тепер текст має простір усередині жовтої коробки.

Використовуй padding для кнопок, карток, попереджень і будь-якого елемента, де контент не має торкатися краю.

Можна задати padding для одного боку за допомогою властивостей padding-top, padding-right, padding-bottom і padding-left.

Border

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

Можна керувати її шириною, стилем і кольором.

Можна редагувати
<div class="avatar">A</div>

<style>
  .avatar {
    width: 64px;
    height: 64px;
    border: 4px solid black;
  }
</style>

Рамка обводить елемент.

Використовуй borders, щоб розділяти секції, окреслювати картки або створювати чіткі візуальні межі.

Якщо ширина border дорівнює 0, рамка не з'являється і не займає місця в макеті.

Margin

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

Він відштовхує інші елементи. Margins прозорі, тому крізь них видно фон батьківського елемента або сторінки.

Можна редагувати
<button class="primary-button">Надіслати</button>
<button>Скасувати</button>

<style>
  .primary-button {
    margin-right: 15px;
  }
</style>

Перша кнопка відштовхує другу кнопку.

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

Padding проти margin

Padding і margin створюють простір, але в різних місцях.

Padding створює простір усередині елемента. Margin створює простір зовні елемента.

Можна редагувати
<div class="box padded-box">Я використовую padding.</div>
<div class="box margin-box">Я використовую margin.</div>

<style>
  .box {
    background-color: lightblue;
    border: 2px solid darkblue;
  }

  .padded-box {
    padding: 30px;
  }

  .margin-box {
    margin-top: 30px;
  }
</style>

Padding збільшує синю область. Margin створює проміжок зовні другої коробки.

Використовуй padding, коли внутрішній частині елемента потрібно більше простору. Використовуй margin, коли потрібно більше простору між елементами.

Як обчислюється загальний розмір елемента

За замовчуванням CSS використовує розмір content-box.

Це означає, що width керує лише областю контенту. Padding і borders додаються зверху.

Можна редагувати
<div class="sidebar">Меню</div>

<style>
  .sidebar {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightgray;
  }
</style>

Загальна видима ширина:

Лише читання
200px контент
+ 40px лівий і правий padding
+ 10px ліва і права рамка
= 250px загалом

Це пояснює, чому елемент може виглядати ширшим, ніж width, який ти написав.

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

Що робить box-sizing

box-sizing змінює те, як браузер обчислює width і height.

Він дозволяє вирішити, чи padding і borders додаються зовні ширини, чи включаються всередину неї.

Можна редагувати
<input type="text" class="text-field" placeholder="Твоє ім'я" />

<style>
  .text-field {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

Input залишається всередині контейнера навіть із padding.

box-sizing не включає margin. Margins завжди залишаються зовні коробки.

content-box проти border-box

content-box — це значення за замовчуванням. Padding і borders додаються зовні ширини.

border-box включає padding і borders всередину ширини, яку ти задаєш.

Можна редагувати
<div class="card content-box-card">content-box</div>
<div class="card border-box-card">border-box</div>

<style>
  .card {
    width: 300px;
    padding: 30px;
    border: 5px solid red;
    background-color: pink;
    margin-bottom: 20px;
  }

  .content-box-card {
    box-sizing: content-box;
  }

  .border-box-card {
    box-sizing: border-box;
  }
</style>

Картка content-box стає ширшою за 300px.

Картка border-box залишається рівно 300px завширшки.

Використовуй border-box, коли хочеш, щоб правила ширини було легше передбачити.

content-box проти border-box

Чому багато розробників використовують box-sizing: border-box

border-box спрощує математику макета.

Якщо задати елементу width: 50%, він може зберегти цю ширину навіть після додавання padding і borders.

Багато проєктів додають це правило на початку CSS-файлу:

Лише читання

Це робить розміри більш передбачуваними на всій сторінці.

Будь обережним, додаючи це до старого проєкту. Існуючі макети могли бути побудовані навколо стандартної поведінки content-box.

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

Схлопування margins відбувається, коли вертикальні margins торкаються один одного.

Замість того щоб додати їх разом, браузер використовує більший margin.

Можна редагувати
<h2 class="title">Мій заголовок</h2>
<p class="text">Текст мого абзацу.</p>

<style>
  .title {
    margin-bottom: 30px;
  }

  .text {
    margin-top: 10px;
  }
</style>

Проміжок між заголовком і абзацом дорівнює 30px, а не 40px.

Схлопування margins впливає лише на вертикальні margins у звичайному потоці документа. Ліві й праві margins не схлопуються.

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

Типові помилки початківців

  • Забувати, що браузери додають стандартні margins до елементів, таких як body, заголовки й абзаци.
  • Використовувати padding, коли насправді потрібен простір між двома окремими елементами.
  • Використовувати margin, коли хочеш, щоб фоновий колір елемента збільшився.
  • Забувати, що стандартний content-box додає padding і borders зовні ширини.
  • Очікувати, що горизонтальні margins схлопуються. Схлопуватися можуть лише вертикальні margins.

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

Подивись на це CSS-правило:

Лише читання

Яку загальну видиму ширину ця коробка займе на екрані?

Відповідь: 520px.

Це 400px ширини контенту, плюс 50px лівого padding, 50px правого padding, 10px лівої рамки і 10px правої рамки.

Короткий тест

Питання 1: Який шар прозорий і дає бачити фон позаду елемента: padding чи margin?

Відповідь: Margin.

Питання 2: Якщо два абзаци розміщені вертикально і обидва margins, які торкаються, дорівнюють 20px, який проміжок між ними?

Відповідь: 20px, бо вертикальні margins схлопуються.

Питання 3: Яке значення box-sizing включає padding і borders всередину заданої ширини?

Відповідь: border-box.

Малий виклик

Спробуй стилізувати цю картку профілю і відступи тексту:

  • Дай .card ширину 250px, суцільну рамку, padding і box-sizing: border-box.
  • Дай .first-paragraph нижній margin 40px.
  • Дай .second-paragraph верхній margin 20px.
  • Зверни увагу, що проміжок між абзацами буде 40px, а не 60px.
Можна редагувати
<div class="card">
  <h3>Профіль користувача</h3>
  <p class="first-paragraph">Основна інформація профілю.</p>
  <p class="second-paragraph">Більше деталей нижче.</p>
</div>

<style>
  .card {
    /* Додай ширину, рамку, padding і border-box */
  }

  .first-paragraph {
    /* Додай нижній margin 40px */
  }

  .second-paragraph {
    /* Додай верхній margin 20px */
  }
</style>

Один можливий варіант:

Лише читання

Підсумок

  • CSS box model оточує кожен елемент контентом, padding, border і margin.
  • Контент — це місце, де знаходяться текст, зображення і дочірні елементи.
  • Padding створює простір усередині коробки.
  • Borders обрамляють коробку зовні padding.
  • Margins створюють прозорий простір зовні рамки.
  • Стандартна модель content-box додає padding і borders зовні заданої ширини.
  • box-sizing: border-box включає padding і borders всередину заданої ширини.
  • Вертикальні margins можуть схлопуватися в один більший margin замість того, щоб додаватися.