Вивчайте Завдання: Застосування Box Sizing до Елементів | Модель Коробки CSS та Елементи Відступів

Завдання

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

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

index.html

index.css

index.html

index.css

Перший блок використовує content-box (типово). Ширина та висота застосовуються лише до вмісту, тому відступи та рамка збільшують його фінальний розмір понад 200×200px;
Другий блок використовує border-box. Ширина та висота включають вміст, відступи та рамку, тому загальний розмір залишається точно 200×200px.

Це робить перший блок візуально більшим, тоді як другий залишається незмінним незалежно від доданих відступів чи рамки.

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

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

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

Запитати АІ

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

Suggested prompts:

What CSS code should I use to apply these box-sizing values?

Can you explain why the sizes appear different visually?

Can you show an example of how padding and border affect each box?

Свайпніть щоб показати меню

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

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

index.html

index.css

index.html

index.css

Перший блок використовує content-box (типово). Ширина та висота застосовуються лише до вмісту, тому відступи та рамка збільшують його фінальний розмір понад 200×200px;
Другий блок використовує border-box. Ширина та висота включають вміст, відступи та рамку, тому загальний розмір залишається точно 200×200px.

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

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

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