HTML and CSS Reference
In-Depth Information
a
padding
of
20
pixels around every side of the element with a
width
of
400
pixels,
the actual full width will become 420 pixels.
1.
div {
2.
box-sizing: padding-box;
3.
}
Border Box
Lastly, the
border-box
value alters the box model so that any
border
or
padding
property values are included within the
width
and
height
of an element. When using
the
border-box
value, if an element has a
width
of
400
pixels, a
padding
of
20
pixels around every side, and a
border
of
10
pixels around every side, the actual
width
will remain
400
pixels.
If we add a
margin
, those values will need to be added to calculate the full box size. No
matter which
box-sizing
property value is used, any
margin
values will need to be
added to calculate the full size of the element.
1.
div {
2.
box-sizing: border-box;
3.
}
Figure 4.6
Different
box-sizing
values allow the width of an element—and its
box—to be calculated from different areas
Search WWH ::
Custom Search