Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Challenge: Apply Box Sizing to Elements | Section
CSS Fundamentals for React Developers - 1768407374224

bookChallenge: Apply Box Sizing to Elements

Task

Let's explore the practical differences between the content-box and border-box values for the box-sizing property. Your task is as follows:

  • Apply the content-box value to the box-sizing property for the element with the content-box id.
  • Apply the border-box value to the box-sizing property for the element with the border-box id.
index.html

index.html

index.css

index.css

copy
  • box-sizing: content-box: Width and height exclude padding and border.
  • box-sizing: border-box: Width and height include padding and border.
index.html

index.html

index.css

index.css

copy

Explanation

  • The first box uses content-box (the default). Width and height apply only to the content, so padding and border increase its final size beyond 200×200px;
  • The second box uses border-box. Width and height include content, padding, and border, so the overall size stays exactly 200×200px.

This makes the first box visibly larger, while the second remains consistent regardless of added padding or border.

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

Як ми можемо покращити це?

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

Секція 1. Розділ 20

Запитати АІ

expand

Запитати АІ

ChatGPT

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

bookChallenge: Apply Box Sizing to Elements

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

Task

Let's explore the practical differences between the content-box and border-box values for the box-sizing property. Your task is as follows:

  • Apply the content-box value to the box-sizing property for the element with the content-box id.
  • Apply the border-box value to the box-sizing property for the element with the border-box id.
index.html

index.html

index.css

index.css

copy
  • box-sizing: content-box: Width and height exclude padding and border.
  • box-sizing: border-box: Width and height include padding and border.
index.html

index.html

index.css

index.css

copy

Explanation

  • The first box uses content-box (the default). Width and height apply only to the content, so padding and border increase its final size beyond 200×200px;
  • The second box uses border-box. Width and height include content, padding, and border, so the overall size stays exactly 200×200px.

This makes the first box visibly larger, while the second remains consistent regardless of added padding or border.

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

Як ми можемо покращити це?

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

Секція 1. Розділ 20
some-alt