We gaan een veel voorkomend probleem bespreken, namelijk het huidige box model. Je bent lekker bezig met het opzetten van de layout van je nieuwe project, alles gaat goed en lekker, je plaatst een aantal DIV elementen en die geef je een breedte mee. Want hey, ze moeten wel volgens het design geïmplementeerd worden. Wanneer je hier mee klaar bent, ga je druk bezig met het plaatsen van teksten, deze teksten staan logischerwijs tegen de rand van je DIV elementen aan. Geen probleem, we passen gewoon een beetje padding toe… En vervolgens ben je dus bezig met het uitrekenen van de breedte minus de padding…
Dit is dus te danken aan het huidige box model en we kunnen gerust zeggen -vooral de oude rotten onder ons weten dat- dat dit niet altijd zo is geweest! Mocht je de historie willen weten van het box model, dan heeft Wikipedia daar een mooi artikel over. Want voor het eerst in mijn leven moet ik zeggen dat, Internet Explorer het ooit precies goed deed (ik sterf een beetje van binnen). Internet Explorer gebruikte namelijk altijd het box model zoals wij dat graag zien. Dit werd echter bestempeld als een bug in Internet Explorer en dit werd dus ook door Microsoft aangepast zodat het overeenkomt met het huidige box model.
De oplossing
Daar komt ie dan, de oplossing voor dit probleem (dankzij: bron):
[css]
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}[/css]
Op deze manier werkt het box model precies zoals je dat wilt en wordt het toegepast op alle elementen. Het enige nadeel is, dat je dit enkel kan gebruiken voor projecten die vanaf IE8 ondersteunen. Meer over browser ondersteuning voor border-box kun je hier vinden.
