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.
Click here to view code image
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.
Click here to view code image
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