CSS Master

300 pixelswidewith 20 pixelsofpaddinganda 10 pixelborder,thewidthneeds

tobe240px.Mostleadingbrowserscalculatedthewidthinjustthisway.Internet

Explorer5.5,however,didnot.

Instead,IE5.5usedthewidthpropertyasthefinalarbiterofboxdimensions,with

paddingandborderdrawninsidetheboxasseeninFigure4.4.Bothvalueswere,

ineffect,subtractedfromwidth,decreasingthesizeofthecontentarea.Thoughit’s

theexactoppositeofthebehaviordefinedinthespecification,manywebdevelopers

thoughtitwasthemoresensibleapproach.^2

Figure 4.4. The CSS 2.1 box model versus the old Internet 5.5 “quirks mode” box model

Partlyasawaytoresolvethesecompetingmodels,theCSSworkinggroupintroduced

thebox–sizingproperty.Itletsuschoosetheboxmodelimplementationthatwe

prefer,andgreatlysimplifiescalculationswhenworkingwithresponsivedesigns.

Choosing a Box Model with box-sizing

Thebox-sizingpropertyisdefinedintheCSSBasicUserInterfaceModuleLevel

3 specification.^3 Ithastwopossiblevalues:content-boxandborder-box.

Initially,thevalueofbox-sizingiscontent-box.Withthisvalue,settingthewidth

andheightpropertiesofanelementaffectthesizeofitscontentarea.Thismatches

thebehaviordefinedbytheCSS2.1specification,andit’sthedefaultbehaviorin

modernbrowsers(aspresentedinFigure4.4).

(^2) AgreattoolforvisualizingthesedifferencesisCarolineArtz’BoxSizingDemo.
[http://codepen.io/carolineartz/full/ogVXZj/]
(^3) http://www.w3.org/TR/css3-ui/#box-sizing
132 CSS Master