css властивість box-sizing


Властивість box-sizing дозволяє змінити алгоритм розрахунку розмірів блоку, щоб властивості width і height задавали розміри не контенту, а саме розміри блоку.

Властивість `box-sizing`

Без задання, коли ви вказуєте ширину блоку (width), браузер розраховує її без врахування меж (border) та внутрішніх відступів (padding), вказавши border-box у якості значення властивості box-sizing, браузер почне враховувати кордони та відступи у формуванні ширини та висоти блоку.

Типовий алгоритм за замовчуванням використовує content-box, а це означає, що будь-які розміри, які ви надаєте, використовуються лише для визначення розміру вікна вмісту - будь-які поля і межі виводяться за межами вікна вмісту. Тому, застосовуючи ширину 200 пікселів та поле 10 пікселів до елемента, елемент буде займати загальну ширину 220 пікселів (припускаючи, що повзунок додається до всіх чотирьох сторін або, принаймні, з лівого та правого боку). Це відбувається тому що підкладка додана до ширини вікна.

Ви можете використовувати значення border-box, щоб змінити це так, що будь-які поля та межі будуть включені в розміри висоти та ширини елемента. У цьому випадку елемент буде займати лише 200 пікселів, тому що заповнення додано до внутрішньої частини елемента.

Ця властивість особливо важлива для створення адаптивного дизайну.

Нотатка:

Деякі фахівці рекомендують веб-розробникам застосовувати значення border-box для всіх елементів на сторінці.

Синтаксис

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

Властивість box-sizing може отримувати 4 значення:

content-box

Грунтується на стандартах CSS, при цьому властивості width і height задають ширину і висоту контенту і не включають в себе значення відступів, полів і кордонів.

border-box

Властивості width і height включають в себе значення полів і кордонів, але не відступів (margin). Ця модель використовується браузером Internet Exporer в режимі сумісності.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання: content-box
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.boxSizing="border-box"

Переглядачі

Переглядач
box-sizing

10.0
1.0 -webkit-

8.0

29.0
1.0 -moz-

5.1
3.0 -webkit-

7.0

12.0

Переглядач
box-sizing

2.1
1.0 -webkit-

29.0
1.0 -moz-

5.1
3.0 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Різні значення у дії

Використання властивості

Вказує, що елементи повинні мати заповнення і рамка включається в загальну ширину і висоту елемента

div {


  width: 300px; 


  height: 100px; 


  border: 1px solid blue; 


  box-sizing: border-box; 


}

Визначає два блоки, які розташовуються пліч-о-пліч

div {


  box-sizing: border-box; 


  width: 50%; 


  float: left; 


}

Додаткові посилання