Netters.nl

Wat is het box model

Om het heel kort te zeggen: het box model beschrijft de manier waarop breedte, padding, borders en margins door een browser geïnterpreteerd moeten worden. Elk html element op de pagina heeft hiermee te maken.

In bovenstaande afbeelding zien we van binnen naar buiten de content area, de padding, de border en de margin. De scheiding tussen 'binnen' de box en 'buiten' de box wordt gelegd door de border.

Erg leuk dit, maar waarom moet ik dit weten? Nou, afgezien van het feit dat theoretische achtergrondkennis nooit verkeerd is, is het probleem met dit box model dat niet elke browser dit goed interpreteert. Dat wil zeggen: Internet Explorer in quirks mode heeft een andere benadering van het box model dan ooit bedoeld is door het W3C. Het verschil zit hem in de interpretatie van de css atributen width en height. Voor het gemak spreek ik in dit artikel even alleen over het width attribuut, maar je kunt overal net zo goed height er voor invullen.

De verschillen

In het box model, zoals bedoeld door het W3C, valt het attribuut width samen met de breedte van de content area. De padding en de border worden daarbij opgeteld. Het box model van Internet Explorer pakt dit wat anders aan. Deze pakt bij het width attribuut de breedte van de content area, de padding en de border samen. Als je dat dan vergelijkt bij het box model van het W3C zie je dat als je in je css een element met een width van 100px, een padding van 10px en een border van 1px hebt, het element in totaal (afgezien van het margin attribuut; die heeft in dit verhaal niet zovel te zoeken) een breedte van 100+10+1 = 111px heeft. In Internet Explorer zou dit echter maar een breedte van 100px opleveren, omdat de padding en de border ‘samenvallen’ met de width. Zoals je wel vermoed is dit nogal vervelend bij het opzetten van een website layout.