Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >box-sizing

box-sizing

box-sizing: content-box | border-box

Entscheidet, worauf sich width und height beziehen: nur auf den Inhalt (Standard content-box) oder auf das ganze Element samt Innenabstand und Rahmen (border-box). Mit border-box ist ein Element mit width: 300px wirklich 300 px breit.

Werte

  • content-box – die Abmessungen gelten für den Inhalt, Innenabstand und Rahmen kommen hinzu.
  • border-box – die Abmessungen gelten für das ganze Element bis zur Außenkante des Rahmens, der Inhalt wird um Innenabstand und Rahmen kleiner. Außenabstände (margin) zählen auch hier nicht zur Größe.

Initialwert: content-box. Vererbt: nein. Gilt für: alle Elemente, die eine Breite oder Höhe annehmen.

Beispiele

Zwei Elemente mit gleicher Breite, gleichem Innenabstand und Rahmen:

<div class="box content">content-box</div>
<div class="box border">border-box</div>

.box {
  width: 200px;
  padding: 10px 20px;
  border: 5px solid #38b8f9;
  margin-bottom: 8px;
  background: #eaf7ff;
}
.content { box-sizing: content-box; }
.border { box-sizing: border-box; }
Ergebnis
content-box
border-box

Das erste Element ist 200 + 40 + 10 = 250 px breit, das zweite genau 200 px (sein Inhalt misst 150 px).

Die übliche Einstellung am Anfang der Stile einer ganzen Website – border-box für alle Elemente und ihre Pseudoelemente:

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

Worauf Sie achten sollten

  • Die Eigenschaft wird nicht vererbt. Deshalb verwendet die globale Einstellung den Universalselektor *, nicht nur body.
  • Formularelemente haben in den Standardstilen des Browsers mal border-box (etwa button, select), mal content-box (input, textarea). Die Einstellung aus dem zweiten Beispiel vereinheitlicht sie.
  • Mit border-box kann der Inhalt nicht kleiner als null werden: Sind Innenabstand und Rahmen größer als die Breite, wächst das Element.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 10, Firefox 29, Safari 5.1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
width
height
padding
border