Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Challenge: Apply Box Sizing to Elements | The CSS Box Model & Spacing Elements
CSS Fundamentals

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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 4

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

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?

bookChallenge: Apply Box Sizing to Elements

Swipe to show menu

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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 4
some-alt