box-sizing

Опис CSS властивості box-sizing:

Застосовується для зміни алгоритму розрахунку ширини і висоти елемента. Згідно специфікації CSS ширина блоку складається з ширини контенту (width), значень відступів (margin), полів (padding) і границь (border). Аналогічно іде і з висотою блоку. Властивість box-sizing дозволяє змінити цей алгоритм, щоб властивості width і height задавали розміри не контенту, а розміри блоку.

Синтаксис CSS властивості box-sizing:

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

Аргументи CSS властивості box-sizing:

content-box Грунтується на стандартах CSS, при цьому властивості width і height задають ширину і висоту контенту і не включають в себе значення відступів, полів та кордонів.
border-box Властивості width і height включають в себе значення полів і меж, але не відступів (margin). Ця модель використовується браузером Internet Exporer в режимі несумісності.
inherit Успадковує значення з батьків.

Значення по замовчуванні CSS властивості box-sizing:

content-box

Наслідування CSS властивості box-sizing:

не наслідується

Приклад використання CSS властивості box-sizing:

<style type="text/css"> .box1 { background: #f0f0f0; width: 300px; padding: 10px; border: 2px solid #000; } .box2 { background: #fc0; width: 300px; padding: 10px; margin-top: 10px; border: 2px solid #000; box-sizing: border-box; } </style> <div class="box1">Текст1.</div> <div class="box2">Текст2.</div>

Використання CSS властивості box-sizing:

всі елементи

Додаткові відомості про CSS властивість box-sizing:

Firefox використовує нестандартну властивість-moz-box-sizing. Safari і Chrome використовують нестандартну властивість-webkit-box-sizing.