HTML and CSS Reference
In-Depth Information
7. }
According to the box model, the total width of an element can be calculated using the fol-
lowing formula:
Click here to view code image
margin-right + border-right + padding-right + width + padding-left +
border-left + margin-left
In comparison, according to the box model, the total height of an element can be calculated
using the following formula:
Click here to view code image
margin-top + border-top + padding-top + height + padding-bottom +
border-bottom + margin-bottom
Using the formulas with the box shown in Figure 4.3 , we can find the total height and
width of our example.
Width : 492px = 20px + 6px + 20px + 400px + 20px + 6px +
20px
Height : 192px = 20px + 6px + 20px + 100px + 20px + 6px +
20px
Figure 4.3 The box model broken down, including a base height and width plus pad-
dings, borders, and margins
Search WWH ::




Custom Search