Challenge: 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.

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

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.