box-sizing

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.

Steckbrief box-sizing

Syntax: box-sizing: content-box | border-box
Initialwert: content-box
Vererbt: Nein
Animierbar: Nein

Kategorie: Box-Modell
Werte: 2
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

2 Werte

Wert	Beschreibung	Beispiel
`content-box`	width und height beziehen sich nur auf den Inhaltsbereich. Padding und Border kommen obendrauf. (Standard)	box-sizing: content-box
`border-box`	width und height beinhalten Inhalt, Padding und Border. Die Gesamtgröße bleibt wie angegeben.	box-sizing: border-box

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

Beispiele

3 Beispiele

content-box vs. border-box

/* 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>

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

Prozentuale Breiten

/* 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>

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

Globaler border-box Reset

*,
*::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

4 Fehler

01 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.

02 Annehmen, dass Margin einbezogen wird

Auch bei border-box liegt Margin außerhalb der angegebenen width. width: 200px plus margin: 20px ergibt 240px Platzbedarf.

03 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.

04 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Teilweise

box-sizing wird in einigen Kontexten ignoriert
Outlook

Keine

Outlook ignoriert box-sizing komplett und verwendet immer content-box
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende Unterstützung

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da