box-sizing

CSS-властивість box-sizing визначає, як обчислюється загальний розмір елемента, зокрема, як враховуються його padding та border при визначенні ширини та висоти. Вона дозволяє керувати тим, чи додаються відступи та межі до встановлених розмірів елемента або включаються в них.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США. 558 відеовідгуків від працевлаштованих випускників. Це топ серед українських ІТ-шкіл. Обирай свою нинішню сферу роботи й дивись історії екс-колег, що вже перейшли в ІТ

Синтаксис

box-sizing: content-box | border-box;

Значення

  • content-box — стандартне значення. Розміри елемента (ширина та висота) визначаються лише для вмісту елемента. padding та border додаються до загальних розмірів елемента, що може привести до змінення фактичних розмірів елемента.
  • border-box — розміри елемента (ширина та висота) включають padding та border. Тобто, якщо ви встановлюєте ширину або висоту для елемента, вони вже враховують padding і border, що дозволяє точніше контролювати розміри елемента.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • box-sizing з border-box є дуже корисним при створенні адаптивних макетів, де потрібно точно контролювати розміри елементів, навіть якщо вони мають padding і border. Це дозволяє уникнути розбіжностей між заданими і фактичними розмірами елементів.
  • Властивість box-sizing дуже часто використовується в CSS reset або нормалізації, щоб узгодити поведінку елементів на різних браузерах, де за замовчуванням можуть бути різні значення для box-sizing.
  • Встановлення box-sizing: border-box робить управління макетами простішим, оскільки не потрібно враховувати додаткові відступи та межі при розрахунку розмірів елементів.
  • Властивість підтримується всіма сучасними браузерами.