CSS Master

Figure 4.2. An example of an inline box with margin: 1em and padding: 5px applied

Buthowarethedimensionsoftheboxcalculated?Hereiswhereitbecomesmore
complicated.AsseeninFigure4.3,boxdimensionsarethesumofthebox’scontent
area,plusitspaddingwidth,andborderwidthasdefinedinCSS2.^1 Themargin
widthcreatesamarginboxfortheelement,andaffectsotherelementsinthedocu-
ment;however,themarginwidthhasnoeffectonthedimensionsoftheboxitself.

Figure 4.3. The CSS 2.1 box model

Forinstance,apelementwithwidth: 300px,padding: 20px,andborder: 10px
hasacalculatedwidthof 360 pixels.That’sthesumofitswidth,leftandright
padding,andleftandrightborder-widthproperties.Tocreateanelementthatis

(^1) http://dev.w3.org/csswg/css2/box.html
Complex Layouts 131