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

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

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

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

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

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

правити

Нотатка

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

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

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

content-box

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

автор: NagarD

правити

border-box

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

автор: NagarD

правити

initial

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

автор: NagarD

правити

inherit

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

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
box-sizing	10.0 <br>1.0 -webkit-	29.0 <br>1.0 -moz-	5.1 <br>3.0 -webkit-	7.0	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
box-sizing	2.1 <br>1.0 -webkit-	29.0 <br>1.0 -moz-	5.1 <br>3.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cb">content-box: 300px — тільки вміст, рамки додаються зверху</div>
<div class="bb">border-box: 300px разом із рамками й відступами</div>

div {
    width: 300px;
    padding: 20px;
    border: 10px solid #0172ad;
    margin-bottom: 8px;
    background: #eef6ff;
}

.cb { box-sizing: content-box; }
.bb { box-sizing: border-box; }

<div class="col">ліва колонка 50%</div>
<div class="col">права колонка 50%</div>

.col {
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 12px;
    border: 2px solid #0172ad;
    background: #eef6ff;
}