CSS Box Sizing
Sie wissen bereits, dass Padding und Border eine Box größer machen können als die deklarierte width. box-sizing wählt die Regel für diese Rechnung: Bedeutet width „nur Content“ oder „Content plus Padding plus Border“?
Zwei Modelle auf einen Blick
📊 content-box vs. border-box
| Modell | Was width / height abdecken |
Alltagseffekt |
|---|---|---|
content-box (Standard) |
Nur Content | Padding und Border werden außerhalb der deklarierten Größe addiert |
border-box |
Content + Padding + Border | Deklarierte Größe ist die äußere Border-Kante; Content schrumpft hinein |
| Margin | In keinem Modell enthalten | Äußerer Abstand bleibt getrennt von box-sizing |
Standard: content-box
Im Standardmodell bemisst width: 200px den Content. Padding und Border dazu — die gemalte Box wächst.
Content-box (Standard)
css.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* Content 200px + Padding + Border → Gesamtbreite größer */Wechsel zu border-box
Mit border-box umfasst dieselbe width: 200px Padding und Border. Die äußere Kante bleibt näher an 200px; der Content-Bereich wird kleiner.
Border-box-Sizing
css.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* Äußere Border-Box zielt auf 200px; Content schrumpft */Gleiche Zahlen, anderer Fußabdruck
Stellen Sie beide Modelle mit identischer Breite, Padding und Border nebeneinander.
Die beiden Modelle vergleichen
css.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}
.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Gleiche Deklarationen; .contenty braucht mehr Horizontalraum */Warum Teams border-box mögen
Wenn eine Karte eine Spalte genau füllen soll — etwa width: 100% mit Padding — hält border-box die Karte davon ab, aus dem Parent zu überlaufen.
Spaltenfreundliche Karte
css.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}Eine ruhige globale Gewohnheit
Viele Stylesheets setzen border-box einmal für alles, damit die Alltag-Breitenrechnung vorhersagbar bleibt. Margin liegt weiterhin außen.
Universelle border-box-Gewohnheit
css*,
*::before,
*::after {
box-sizing: border-box;
}Selbst ausprobieren
- Bauen Sie
.panel-contentmitwidth: 200px, Padding und Border unter content-box. - Kopieren Sie als
.panel-bordermitbox-sizing: border-box— die äußere Größe nähert sich 200px. - Stellen Sie
.contentyund.borderishmit denselben Zahlen nebeneinander. - Machen Sie eine
width: 100%-Karte mit Padding; wechseln Sie box-sizing und sehen Sie, welche überläuft. - Probieren Sie die universelle
*-Gewohnheit auf einer kleinen Demoseite.
Häufige Fehler
- Denken, border-box schließe Margin ein (tut es nicht)
- Vergessen, dass der Standard content-box ist, bis Sie ihn ändern
- Erwarten, dass Outline box-sizing folgt (Outline bleibt außen und nimmt weiter keinen Layout-Platz)
width: 100%mit starkem Padding unter content-box und Staunen über Überlauf- Prozente mischen, ohne zu wissen, welches Sizing-Modell aktiv ist
Kurzfassung
- Standard
box-sizing: content-boxbemisst Content; Padding und Border kommen dazu border-boxhält Padding und Border innerhalb der deklarierten Breite/Höhe- Margin liegt außerhalb beider Modelle
- Border-box macht Spaltenbreiten und
width: 100%-Karten oft einfacher - Ein universelles border-box-Reset ist eine übliche, ruhige Gewohnheit
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt