Бокс Сайзінг

content-box

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

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

content-box

• This is the default value of the box-sizing;
• When an element is set to content-box, its size is calculated based on its content box;
• The content box includes only the actual content of the element, excluding any padding, border, or margin;
• If we set an element's width and height with box-sizing: content-box, the specified width and height only apply to the content area.

Let's run the following example:

border-box

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

border-box

• When an element is set to border-box, its size calculation includes the padding and border in total size;
• This means that if we set an element's width and height properties with box-sizing: border-box, the specified width and height values include any padding and border;
• In this case, the content area will adjust to accommodate the specified width and height, including the padding and border;
• This is often used to ensure that an element's overall size remains consistent, regardless of the padding and border.

inherit

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

inherit

• The inherit value allows an element's box-sizing property to inherit its value from its parent element;
• This means that the box-sizing behavior of the current element is determined by the box-sizing property of its parent element;
• It can help ensure a consistent box-sizing behavior throughout a document by setting it on a parent container.