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

Завдання

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

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

• box-sizing: content-box: Ширина та висота без урахування падінгу та рамки.
• box-sizing: border-box: Ширина та висота включають падінги та рамку.

Пояснення

У цьому прикладі ми маємо два елементи 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.