Бокс Сайзінг

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


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

content-box

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

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

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

border-box

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

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

inherit

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

1. Яке значення за замовчуванням для властивості box-sizing?

2. Якщо батьківський елемент має `box-sizing: border-box`, а дочірній елемент має `box-sizing: inherit`, яке значення буде використовувати дочірній елемент для властивості `box-sizing`?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 2

Запитати АІ