Die CSS-Angabe box-sizing ist ein Thema für sich und soll in diesem Artikel nicht im Detail erklärt werden. Kurz gesagt, erleichtert sie den Umgang mit dem CSS-Box-Modell, weil man angeben kann, dass Ränder und Innenabstände nicht zur Gesamtbreite einer Box hinzugerechnet werden sollen. Dem Webdesigner wird so eine Menge Rechnerei und Fummelei erspart, etwa wenn mehrere Boxen nebeneinander in einen umgebenden Container passen sollen. Genau erklärt wird das alles in dem Artikel Box Sizing auf CSS-Tricks.
Wer mit CSS-Resets arbeitet, wird das Box-Sizing universell angeben wollen. Wie man das am geschicktesten bewerkstelligt, wird ebenfalls in dem oben genannten Artikel angegeben. Hier der Code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Ich persönlich setze nicht so gerne universelle Angaben ein (die mit den Sternchen) – ich habe einmal gelesen, dass man das deswegen vermeiden sollte, weil es die Abarbeitung der CSS-Datei etwas verlangsamt. Nachgemessen habe ich das allerdings nicht.