CSS box-sizing

Die Eigenschaft <box-sizing> bestimmt, wie der Browser die Breite und Höhe eines Elements berechnet: nur für den Inhalt oder einschließlich Padding und Border.

Funktionsweise von box-sizing

Es gibt zwei Hauptwerte: <content-box> (Standard) und <border-box>. Bei content-box beziehen sich Breite und Höhe nur auf den Inhalt, während bei border-box auch Padding und Border einbezogen werden.

Im folgenden Code vergleichen wir zwei Boxen: eine mit content-box und eine mit border-box Einstellung:

Visualisierungsbeispiele

Die Beispiele zeigen, dass border-box eine viel berechenbarere Größenanpassung ermöglicht, da Padding und Border innerhalb der angegebenen Maße bleiben.

Vergleich von content-box und border-box

Der Unterschied zwischen content-box und border-box liegt darin, was in die Breite und Höhe einbezogen wird. Border-box hilft dabei, die Gesamtgröße eines Elements vorhersehbar zu machen.

Globale Reset-Einstellung

In der Praxis ist es fast immer sinnvoll, für alle Elemente border-box festzulegen. Dazu wird eine CSS-Reset-Regel verwendet.

Verwendung von box-sizing in Layouts

Wenn du mehrere Elemente in einem Container mit fester Breite nebeneinander platzieren möchtest, sorgt border-box dafür, dass Padding und Border die Elemente nicht aus dem Container hinausschieben.

Tipps zur Verwendung von box-sizing

Die richtige Anwendung von box-sizing erleichtert die Layoutgestaltung. Hier einige Tipps:

• Es wird allgemein empfohlen, <box-sizing: border-box;> für die gesamte Seite zu verwenden.
• Verwende Reset-CSS, um die box-sizing-Einstellung für alle Elemente zu vereinheitlichen.
• Teste in verschiedenen Browsern, um ein konsistentes Erscheinungsbild sicherzustellen.