box-sizing

Zuletzt aktualisiert am 15. Februar 2026

box-sizing bestimmt, wie der Browser die Gesamtbreite und Gesamthöhe eines Elements berechnet. Standardmäßig beziehen sich width und height nur auf den Inhaltsbereich, und Padding sowie Border kommen obendrauf. Mit box-sizing: border-box änderst du dieses Verhalten so, dass width und height die Gesamtgröße inklusive Padding und Border beschreiben. Das macht Layouts vorhersehbar und ist heute der empfohlene Standard.

Grundlagen

Das Problem mit dem Standard-Wert content-box wird schnell klar: Du setzt width: 200px, fügst padding: 20px und border: 2px solid hinzu, und die Box ist plötzlich 244px breit statt 200px. Das führt zu Layoutproblemen, besonders bei prozentualen Breiten.

Mit border-box sagst du dem Browser: “Die Box soll insgesamt 200px breit sein, inklusive allem.” Padding und Border werden nach innen gerechnet, nicht nach außen.

Syntax & Werte

Beide Werte betreffen nicht den Margin. Margin liegt immer außerhalb der Box und wird nie in die Berechnung einbezogen.

Beispiele

Der Unterschied in Aktion

/* Standard: width bezieht sich nur auf Content */
.content-box-demo {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 4px solid #dc2626;
  /* Tatsächliche Breite: 200 + 40 + 8 = 248px */
}

/* Empfohlen: width ist die Gesamtbreite */
.border-box-demo {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 4px solid #059669;
  /* Tatsächliche Breite: 200px */
}

<div class="wrapper">
<div class="content-box-demo">
  <strong>content-box</strong><br>
  width: 200px<br>
  + padding: 40px<br>
  + border: 8px<br>
  = <strong>248px total</strong>
</div>
<div class="border-box-demo">
  <strong>border-box</strong><br>
  width: 200px<br>
  Padding und Border<br>
  sind <strong>inklusive</strong>
</div>
</div>

Das Problem mit prozentualen Breiten

Ohne border-box ist width: 50% plus Padding eine Katastrophe für Zwei-Spalten-Layouts.

/* Problem: content-box */
.col-broken {
  box-sizing: content-box;
  width: 50%;
  padding: 16px;
  border: 2px solid #dc2626;
  /* Tatsächlich breiter als 50% → Überlauf */
}

/* Lösung: border-box */
.col-fixed {
  box-sizing: border-box;
  width: 50%;
  padding: 16px;
  border: 2px solid #059669;
  /* Exakt 50% inklusive allem */
}

<p style="font-family:system-ui,sans-serif;font-size:13px;color:#dc2626;margin:0 0 4px;">content-box: Spalten laufen über</p>
<div class="row-broken">
<div class="col-broken">50% + Padding + Border = mehr als 50%</div>
<div class="col-broken">50% + Padding + Border = mehr als 50%</div>
</div>
<p style="font-family:system-ui,sans-serif;font-size:13px;color:#059669;margin:0 0 4px;">border-box: Spalten passen perfekt</p>
<div class="row-fixed">
<div class="col-fixed">50% inklusive allem</div>
<div class="col-fixed">50% inklusive allem</div>
</div>

Der globale Reset

Die Standardpraxis in modernen Projekten ist ein globaler border-box Reset. Damit musst du nie wieder über box-sizing nachdenken.

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

<div class="demo-full">width: 100% mit Padding und Border, ohne Überlauf.</div>

Dieser Reset steht am Anfang fast jeder CSS-Datei und ist Teil gängiger Reset-Stylesheets. Pseudo-Elemente (::before, ::after) werden eingeschlossen, damit auch sie konsistent berechnet werden.

Barrierefreiheit

box-sizing hat keine direkte Auswirkung auf Barrierefreiheit, aber indirekt erleichtert border-box die Erstellung konsistenter Touch-Target-Größen. Wenn du width: 44px; height: 44px; box-sizing: border-box setzt, kannst du sicher sein, dass das Element exakt 44x44px groß ist, egal wie viel Padding oder Border du hinzufügst. Das macht es einfacher, die WCAG 2.5.8 Mindestgröße für Touch-Targets einzuhalten, ohne ständig rechnen zu müssen.

Häufige Fehler

• Den globalen Reset vergessen: Ohne den Reset verwendet jedes Element content-box. Ein einzelnes Element mit border-box hilft nicht, wenn alle anderen noch content-box verwenden.
• Annehmen, dass Margin einbezogen wird: Auch bei border-box liegt Margin außerhalb der angegebenen width. width: 200px plus margin: 20px ergibt 240px Platzbedarf.
• Libraries mit eigenem box-sizing mischen: Manche CSS-Libraries erwarten content-box. Der globale Reset kann deren Layout brechen. Überprüfe die Dokumentation der Library.
• box-sizing für Inline-Elemente setzen: Bei Inline-Elementen wie <span> hat width keine Wirkung, also ändert box-sizing auch nichts. Erst mit display: inline-block oder display: block wird es relevant.

Browser-Kompatibilität

box-sizing wird von allen modernen Browsern vollständig unterstützt. Vendor-Prefixe sind nicht mehr nötig.

Email-Kompatibilität

box-sizing ist in HTML-Emails nur eingeschränkt nutzbar.

Verwandte Eigenschaften