Box-Sizing: Content-Box vs. Border-Box
Verstehen Sie, wie box-sizing die Einbeziehung von Padding und Rahmen in Breiten- und Höhenberechnungen verändert.
Box-Sizing: Content-Box vs. Border-Box ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem mit box-sizing
Standardmäßig setzt CSS width nur für den Inhaltsbereich. Wenn Innenabstand oder Rahmen hinzukommen, vergrößert sich die tatsächlich dargestellte Größe des Elements, was verwirrend und fehleranfällig ist.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Standard)
box-sizing: content-box ist der Standard. width und height gelten nur für den Inhalt. Padding und border werden zusätzlich angerechnet und vergrößern das Element über die festgelegte Größe hinaus.
border-box
Bei box-sizing: border-box umfassen width und height content + padding + border. Das Element behält unabhängig von Padding oder border genau die deklarierte Größe.
<div class="box">Exactly 200px rendered width</div>
Der universelle border-box-Reset
Wenden Sie border-box mit dem allgemein empfohlenen Reset global an:
<div class="demo-box">Width stays exactly 200px</div>
Warum inherit statt *
Mit einem alternativen Muster können Komponenten bei Bedarf box-sizing überschreiben:
<div class="demo-box">Inherited border-box sizing</div>
Prozentuale Breite + Padding
Der wichtigste praktische Vorteil von border-box zeigt sich bei prozentualen Breiten. Ein Element mit width: 50% und 20px Padding bleibt exakt 50 % so breit wie sein übergeordnetes Element, ohne überzulaufen.
<div class="col">50% wide column with padding, no overflow</div>
border-box schließt margin nicht ein
Auch bei border-box ist margin nicht in der deklarierten Breite enthalten. Margins fügen immer außerhalb des Elements zusätzlichen Platz zu dessen festgelegten Abmessungen hinzu.
Historie: Warum ist content-box der Standard?
Historisch legten Browser das Box-Modell unterschiedlich aus. Das W3C standardisierte content-box, während der IE border-box verwendete. Moderne CSS-Implementierungen verwenden aus Gründen der W3C-Konformität standardmäßig content-box, aber praktisch alle Projekte überschreiben diesen Wert mit border-box.
Box-Modell in den DevTools untersuchen
In den Chrome DevTools zeigt das Elements-Panel ein Box-Modell-Diagramm mit den genauen Abmessungen von Inhalt, Padding, border und margin. Das ist der schnellste Weg, Probleme bei der Größenberechnung zu beheben.
Grid und Flexbox verwenden intern border-box
CSS Grid und Flexbox berechnen die Größe von Tracks und Items unabhängig von der box-sizing-Einstellung des jeweiligen Elements immer nach der border-box-Logik. Dadurch bleiben ihre Größenberechnungen vorhersehbar.
min/max mit border-box
min-width, max-width, min-height und max-height funktionieren genauso wie width — bei aktivem border-box schließen sie Padding und border ein.
Schnelltest
Bei box-sizing: border-box hat ein Element mit width: 300px; padding: 30px; eine Inhaltsbreite von:
Zusammenfassung
box-sizing: border-box bezieht Padding und border in die deklarierte Breite ein und verhindert unerwartete Größenänderungen. Wenden Sie es global mit *, *::before, *::after { box-sizing: border-box } an. Margins sind in keinem der beiden Box-Modelle enthalten.
Häufig gestellte Fragen
Ist die Lektion „Box-Sizing: Content-Box vs. Border-Box“ kostenlos?
Ja — der vollständige Text von „Box-Sizing: Content-Box vs. Border-Box“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Box-Sizing: Content-Box vs. Border-Box“?
Verstehen Sie, wie box-sizing die Einbeziehung von Padding und Rahmen in Breiten- und Höhenberechnungen verändert. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Box-Sizing: Content-Box vs. Border-Box“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Breite, Höhe, Margin und Padding verstehen
- Rahmenstile, -breite und -farbe
- Box-Sizing: Content-Box vs. Border-Box
- Outline und Box-Shadow