box-sizing entscheidet, ob eine angegebene Breite den Inhalt meint oder die sichtbare Box. Die Voreinstellung überrascht fast jeden.
- box-sizing
Eigenschaft, die festlegt, ob Breite und Höhe den Inhalt meinen oder die sichtbare Box einschließlich Innenabstand und Rahmen.
Beispiel: „Mit box-sizing auf border-box bleibt eine Box so breit wie angegeben.“
Der Unterschied
*, *::before, *::after {
box-sizing: border-box;
}Voreingestellt ist content-box: Innenabstand und Rahmen kommen zur angegebenen Breite hinzu. Das führt dazu, dass zwei Boxen mit je 50 Prozent Breite und etwas Innenabstand nicht mehr nebeneinanderpassen.
Warum es überall steht
Mit border-box rechnet man so, wie man denkt: Eine Box mit 50 Prozent ist 50 Prozent breit, egal wie viel Innenabstand sie hat. Die drei Zeilen oben stehen deshalb in praktisch jedem Projekt am Anfang des Stylesheets.