CSS Box-sizing - Розмір блоку
CSS Розмір блоку
CSS властивість box-sizing дозволяє включати відступи і межі в загальну ширину і висоту елемента.
Без CSS властивості box-sizing
За замовчуванням ширина і висота елемента розраховується наступним чином:
width + padding + border = фактическая ширина елемента
height + padding + border = фактическая высота елемента
Це означає, що коли ви встановлюєте ширину / висоту елемента, елемент часто здається більше, ніж ви встановили (тому що межа та відступ елемента додаються до вказаної ширини / висоти елемента).
На наступному малюнку показані два елемента <div> з однаковими заданими шириною і висотою:
Два елементи <div>, наведені вище, в результаті мають різні розміри (тому що в div2 задано відступ):
Приклад
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Спробуйте самі »
Властивість box-sizing вирішує цю проблему.
Із CSS властивістю box-sizing
Властивість box-sizing дозволяє нам включати відступи та межі в загальну ширину і висоту елемента.
Якщо ви встановили box-sizing: border-box; для елементів відступ і межі включаються в ширину і висоту:
Ось той самий приклад, що і вище, з box-sizing: border-box; додано в обидва елемента <div>:
Приклад
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Спробуйте самі »
Оскільки результат використання box-sizing: border-box; набагато краще, багато розробників хочуть, щоб всі елементи на їх сторінках працювали саме таким чином.
Наведений нижче код гарантує, що всі елементи будуть мати більш зручний розмір. Більшість браузерів вже використовують box-sizing: border-box; для багатьох елементів форми (але не для всіх - тому вхідні та текстові області виглядають по-різному при width: 100%;).
Застосовувати це до всіх елементів безпечно та розумно:
CSS властивість box-sizing
| Властивість | Опис |
|---|---|
| box-sizing | Визначає, як розраховуються ширина та висота елемента: чи мають вони містити відступи та межі, чи ні |
