Challenge: Box-Sizing

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

In this example, we have two div elements, each utilizing a different value for the box-sizing property:

• The first div features a red border and employs the default value of content-box for the box-sizing property. Despite setting the width and height to 200px, the padding and border contribute additional space, resulting in dimensions larger than 200px in both directions;
• Conversely, the second div showcases a blue border and opts for border-box as the box-sizing property value. While the width and height remain at 200px, the padding and border are included within the box's dimensions.

We can observe the contrasting sizes of the two boxes, with the first being larger due to the additional space from padding and border. In contrast, the second box maintains a consistent size of 200px, inclusive of padding and border.