Бокс Сайзінг

Властивість box-sizing використовується для керування тим, як обчислюється загальний розмір елемента, зокрема його width та height. Існує три можливих значення властивості box-sizing. Розглянемо, що означає кожне з цих значень:

content-box

• Це значення за замовчуванням для box-sizing.
• Коли елементу присвоєно значення content-box, його розмір обчислюється на основі його поля вмісту.
• Поле вмісту включає лише власне вміст елемента, виключаючи будь-які padding, border або margin.
• Якщо ми задаємо width і height елемента за допомогою box-sizing: content-box, вказані ширина і висота застосовуються лише до області вмісту.

Розглянемо наступний приклад:

Ми бачимо, що коли ми вказуємо box-sizing: content-box;, властивість width має значення 200px, а властивість height має значення 40px, що означає, що область вмісту буде рівно 200px завширшки і 40px заввишки.

border-box

• Коли елементу задано значення border-box, до розрахунку його розміру включаються padding і border у загальному розмірі.
• Це означає, що якщо ми встановимо для властивостей width і height елемента значення box-sizing: border-box, то вказані значення ширини і висоти включатимуть будь-які падінги та рамку.
• У цьому випадку область вмісту підлаштується під вказані ширину і висоту, включно з внутрішніми відступами і рамкою.
• Це часто використовується для того, щоб загальний розмір елемента залишався незмінним, незалежно від відступів і рамки.

У цьому прикладі width і height елемента будуть 200px і 60px відповідно, і ці розміри включають відступ і рамку. Таким чином, область вмісту буде підлаштовано під простір, що залишився.

inherit

• Значення inherit дозволяє властивості box-sizing елемента успадковувати його значення від батьківського елемента.
• Це означає, що поведінка поточного елемента визначається властивістю box-sizing його батьківського елемента.
• Це може допомогти забезпечити узгоджену поведінку "box-sizing" у всьому документі, встановивши її для батьківського контейнера.