Що таке блокова модель CSS?

Повне пояснення

Що це і навіщо

Блокова модель CSS описує, як браузер розраховує фізичні розміри елементів на сторінці. Вона визначає, що кожен блок складається з content, padding, border і margin, що разом утворюють його box.

Ключові принципи, терміни, інваріанти

• Content – внутрішній вміст елемента.
• Padding – відступ між content і border, заповнює внутрішній простір.
• Border – рамка навколо padding.
• Margin – зовнішній простір між border і сусідніми елементами.
• Box-sizing – властивість, що визначає, чи враховуються padding і border у ширину/висоту.

Як це працює (життєвий цикл, алгоритм)

1. Браузер читає CSS‑правила.
2. Для кожного елемента обчислюється content width/height (за замовчуванням width і height).
3. Додаються padding та border, що збільшує розміри box.
4. Додається margin, що визначає простір між сусідніми блоками.
5. Якщо box-sizing: border-box, то ширина/висота включають padding і border.

Практика і реалізація (React/Next.js)

<div style={{ width: 300, padding: 20, border: '1px solid #000', margin: 10 }}>
  Контент
</div>

У Next.js можна встановити глобальний box-sizing через CSS‑модулі або styled-components.

Тестування (Jest, Testing Library)

Перевірка розмірів можна виконати через getComputedStyle:

const box = screen.getByText('Контент').parentElement;
expect(getComputedStyle(box).width).toBe('340px'); // 300 + 20*2

Оптимізація продуктивності

• Уникайте надмірних margin‑collapses, що збільшують кількість перерисовок.
• Використовуйте box-sizing: border-box для простіших розрахунків.
• Застосовуйте will-change: transform для елементів, що часто змінюються.

Accessibility

Використовуйте семантичні елементи (<section>, <article>), щоб ARIA‑читачі правильно інтерпретували структуру.

Безпека та валідація

• Уникайте style атрибутів, що приймають користувацькі дані без санітізації.
• Перевіряйте box-sizing у сторонніх бібліотеках, щоб уникнути непередбачуваних розмірів.

Типові помилки й edge cases

• margin: auto не працює у flex‑контейнерах без display:flex.
• Переважання width: 100% у контейнері з padding може викликати переповнення.

Cheatsheet + можливі follow‑up питання

• box-sizing: content-box (за замовчуванням) vs border-box.
• margin collapse: коли вертикальні margin з суміжних блоків об’єднуються.
• Flexbox: як margin auto працює у flex‑контейнері.

Питання для глибшого розуміння: «Як margin‑collapse впливає на layout у Flexbox?», «Чому box-sizing: border-box часто рекомендується в проекті?»