Челендж: Бокс-сайзінг

Завдання

Давайте розглянемо практичні відмінності між значеннями content-box та border-box для властивості box-sizing. Ваше завдання полягає в наступному:

Застосуйте значення content-box до властивості box-sizing для елемента з ідентифікатором content-box.
Застосуйте значення border-box до властивості box-sizing для елемента з ідентифікатором border-box.

index.html

index.css

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Content Box</h1>

<p>

This box uses the default value of 'content-box' for the 'box-sizing'

property. The width and height of the box are set to 200 pixels, and the

padding and border add extra space to the box, making it larger than 200

pixels in both dimensions.

</p>

</div>

<h1>Border Box</h1>

<p>

This box uses the 'border-box' value for the 'box-sizing' property. The

width and height of the box are still set to 200 pixels, but the padding

and border are included in the box's dimensions. This means that the

total size of the box is exactly 200 pixels in both dimensions.

</p>

</div>

</body>

</html>

Пояснення

У цьому прикладі ми маємо два елементи div, кожен з яких використовує різні значення для властивості box-sizing:

Перший div має червону рамку і використовує значення за замовчуванням content-box для властивості box-sizing. Незважаючи на те, що значення width і height встановлено на 200px, padding і border створюють додатковий простір, що призводить до розмірів, більших за 200px в обох напрямках.
І навпаки, другий div показує синю рамку і вибирає border-box як значення властивості box-sizing. Хоча width і height залишаються на рівні 200px, padding і border включаються до розмірів боксу.

Ми можемо спостерігати контрастні розміри двох блоків: перший більший за рахунок додаткового простору за рахунок padding і border. На противагу цьому, друге поле зберігає постійний розмір 200px, включаючи padding і border.

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

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

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

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат