Course Content
CSS Fundamentals
CSS Fundamentals
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 thebox-sizing
property for the element with thecontent-box
id. - Apply the
border-box
value to thebox-sizing
property for the element with theborder-box
id.
index
index
index
box-sizing: content-box
: Width and height exclude padding and border.box-sizing: border-box
: Width and height include padding and border.
index
index
index
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 ofcontent-box
for thebox-sizing
property. Despite setting thewidth
andheight
to200px
, thepadding
andborder
contribute additional space, resulting in dimensions larger than200px
in both directions; - Conversely, the second
div
showcases a blue border and opts forborder-box
as thebox-sizing
property value. While thewidth
andheight
remain at200px
, thepadding
andborder
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
.
Everything was clear?