box-sizing in CSS

Was ist box-sizing?

Mit box-sizing legst du fest, wie der Browser die Gesamtgröße eines Elements berechnet. Dabei geht es vor allem um die Frage: Gelten width und height nur für den Inhalt oder für die komplette sichtbare Box inklusive Padding und Border?

Das klingt klein, ist aber in der Praxis sehr wichtig. Sobald du Padding oder einen Rahmen hinzufügst, kann ein Element breiter werden als geplant – besonders bei festen Prozentwerten oder Grid-Layouts.

Es gibt zwei zentrale Werte:

• content-box – der Standardwert des Browsers
• border-box – der Wert, den die meisten modernen Projekte bevorzugen

1.box {
2    width: 200px;
3    padding: 20px;
4    border: 5px solid royalblue;
5}

Ohne box-sizing gilt automatisch content-box. Die Breite von 200 px bezieht sich dann nur auf den Inhalt. Padding und Border kommen obendrauf.

content-box (Standard)

Bei content-box gelten width und height ausschließlich für den Content-Bereich. Padding und Border werden zusätzlich zur angegebenen Breite und Höhe dazugerechnet.

1.box {
2    box-sizing: content-box; /* Standard */
3    width: 200px;
4    padding: 20px;
5    border: 5px solid royalblue;
6}

Sichtbare Breite: 200 px (Content) + 40 px (Padding) + 10 px (Border) = 250 px

Das ist der Standard des Browsers. Du musst content-box nicht extra schreiben, es sei denn, du möchtest einen anderen Wert wieder überschreiben.

border-box

Mit border-box zählt die angegebene Breite als komplette sichtbare Breite des Elements. Padding und Border sind bereits in dieser Breite enthalten – der Inhalt wird dafür entsprechend kleiner.

1.box {
2    box-sizing: border-box;
3    width: 200px;
4    padding: 20px;
5    border: 5px solid royalblue;
6}

Sichtbare Breite: 200 px (Padding und Border sind bereits enthalten)

Beide Boxen oben haben dieselbe CSS-Breite von 200 px, Padding von 20 px und einen Border von 5 px. Mit border-box bleibt die sichtbare Größe gleich – nur die Aufteilung innerhalb der Box ändert sich.

Vergleich im Layout

Der Unterschied wird besonders deutlich, wenn mehrere Elemente nebeneinander stehen sollen. Wenn du zwei Boxen mit jeweils width: 50% erstellst, sollten sie zusammen genau 100 % der Breite einnehmen – genau das erwartest du in der Praxis.

Mit content-box

Padding und Border werden zur 50 %-Breite addiert. Die zweite Box rutscht deshalb in die nächste Zeile oder über den Container hinaus.

1.container {
2    display: flex;
3}
4
5.item {
6    box-sizing: content-box;
7    width: 50%;
8    padding: 15px;
9    border: 5px solid royalblue;
10}

Mit border-box

Mit border-box bleiben beide Spalten nebeneinander, weil Padding und Border in den 50 % enthalten sind.

1.container {
2    display: flex;
3}
4
5.item {
6    box-sizing: border-box;
7    width: 50%;
8    padding: 15px;
9    border: 5px solid royalblue;
10}

border-box global setzen

Weil border-box Layouts vorhersehbarer macht, setzen viele Projekte diesen Wert einmal global für alle Elemente. So musst du bei jeder einzelnen Box nicht extra daran denken.

1*, *::before, *::after {
2    box-sizing: border-box;
3}

Der Selektor *::before und *::after sorgt dafür, dass auch Pseudo-Elemente dieselbe Berechnung nutzen. Das ist ein gängiges Muster in modernen CSS-Reset- oder Normalize-Stylesheets.