Вивчайте Завдання: Застосування 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

box-sizing: content-box: Ширина та висота не враховують внутрішні відступи (padding) та рамку (border).
box-sizing: border-box: Ширина та висота враховують внутрішні відступи (padding) та рамку (border).

index.html

index.css

Пояснення

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

Запитати АІ

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

Suggested prompts:

Can you show me the CSS code for applying these box-sizing values?

Can you explain when to use content-box vs border-box in real projects?

What happens if I don't specify the box-sizing property?

Awesome!

Completion rate improved to 2.56

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

Завдання

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

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

index.html

index.css

box-sizing: content-box: Ширина та висота не враховують внутрішні відступи (padding) та рамку (border).
box-sizing: border-box: Ширина та висота враховують внутрішні відступи (padding) та рамку (border).

index.html

index.css

Пояснення

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

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

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

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

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