box-sizing

Van al die generaties realiseerden men dat wiskunde niet altijd leuk is, en zo is een nieuwe CSS property box-sizing in het leven geroepen. Als je box-sizing: border-box; op een element zet, zal de padding en de border geen invloed meer uitoefenen op de width. Hier is het voorbeeld van de vorige pagina, maar met de box-sizing: border-box; op beide elementen:

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Aangezien dit veel beter is, willen sommige mensen dit op alle elementen op alle pagina's toepasbaar hebben. Zulke mensen zetten het volgende als CSS op hun pagina's:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Dit garandeert dat alle elementen altijd op deze meer intuïtieve manier hun afmetingen krijgen.

Aangezien box-sizing relatief nieuw is, zal je de prefixes -webkit- en -moz- voor nu nog moeten gebruiken, zoals te zien is in de voorbeelden. Deze techniek maakt het mogelijk om experimentele features in specifieke browsers te gebruiken. Let wel, ondersteuning voor deze property gaat al vanaf IE8+.