box-sizing
Оновлено: 08.12.2022
box-sizing
Застосовується для зміни алгоритму розрахунку ширини і висоти елемента.
Згідно зі специфікацією CSS ширина блоку складається з ширини вмісту (width), значень margin, padding і border. Аналогічно йде і з висотою блоку. Властивість box-sizing дає змогу змінити цей алгоритм, щоб властивості width і height задавали розміри не вмісту, а розміри блоку.
Коротка інформація
| Значення за замовчуванням | content-box |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
box-sizing: content-box | border-box
Значення
| content-box | Ґрунтується на стандартах CSS, при цьому властивості width і height задають ширину і висоту вмісту і не включають в себе значення margin, padding і border. |
| border-box | Властивості width і height містять значення padding і border, але не margin. |
Приклад
Об'єктна модель
Об'єкт.style.boxSizing
Примітка
Firefox до версії 29 підтримує властивість -moz-box-sizing.
Safari до версії 5, Chrome до версії 10, Android до версії 4 підтримують властивість -webkit-box-sizing.