CSS - Box-sizing, padding binnen elementen


Normaal gesproken is het zo dat als je bijvoorbeeld een div hebt geplaatst met een breedte van 400 pixels en je hier nog een border van 2 pixels aan toe gaat voegen de totale ruime die de div in zal nemen 404 pixels is. De rand van 2 pixels links en 2 pixels rechts zal dan bij het totaal worden opgeteld. Wil je de div dus 400 pixels houden moet de ruimte van de rand er worden afgetrokken. Dit is hetzelfde geval zodra padding gaat instellen voor de div. Stel dat je 5 pixels padding in gaat stellen wordt het vlak 410 pixels.

Met CSS 3 is hier een oplossing voor gekomen die met name erg handig kan zijn bij de bouw van een responsive design. Het gaat om box-sizing, in te stellen voor alle browsers.

Het instellen gaat op de onderstaande manier en hiermee bepaal je dat bijvoorbeeld padding automatisch van het ingestelde totaal wordt afgetrokken. Stel je hebt een div van 400 pixels breed en een padding van 5 pixels dan zal met box-sizing automatisch de div een breedte krijgen van 390 pixels en hoef je dus de breedte niet zelf te corrigeren, hetzelfde wat betreft eventueel ingestelde randen. De gebruikte waarde is border-box.

div.block {
        box-sizing: border-box;
}