box model

Nu we het over de width hebben, zullen we het ook over de grootste kanttekening hebben: de box model. Als je de width van een element zet, dan kan deze groter lijken dan de waarde die je hebt vastgelegd. De border en padding van het element rekken zich uit buiten de gespecificeerde width. Kijk naar het volgende voorbeeld waar 2 elementen met dezelfde width waardes uiteindelijk verschillend eruit zien als resultaat.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Al generaties lang ligt de oplossing van dit probleem in de wiskunde. CSS auteurs hebben altijd een kleinere width waarde geschreven waar de padding en de border van afgetrokken waren. Gelukkig is dit tegenwoordig niet meer nodig...