Das Box-Modell und „box-sizing: border-box“

Bestimmt hast du den Begriff „Box-Model“ schon einmal gehört. Dieses Stichwort beschreibt ein bestimmtes Standard-Verhalten von HTML-Elementen. Dieses Verhalten kann zu Problemen im Layout führen.

Das Standard-Box-Model sieht so aus:

(zum Vergrößern anklicken)

In der Mitte sieht man den Text-Absatz um den es geht. Dieses Textelement hat einen Rahmen sowie einen inneren und einen äußeren Abstand.
Wenn man nun im CSS diesem Absatz eine Breite zuweist, zum Beispiel so:

p{
 width:300px;
}

… dann stimmt diese Breite nicht überein mit der optischen Breite des Elements.
Man würde erwarten, dass die Breite von 300px sich auf den gesamten Bereich inklusive Rahmen bezieht. Aber in Wirklichkeit ist nur der innere, weiße Bereich 300px breit.

Dieses Verhalten ist unpraktisch, weil wir jetzt eine Menge herumrechnen müssten, um die korrekte, tasächliche Breite für das Text-Element rauszufinden, damit er uns nicht das Layout durcheinander bringt.

Das Box-Model verändern

Freundlicherweise kann man das Box-Model praxistauglich umschreiben. Die entsprechende Anweisung lautet box-sizing:border-box.

p{
 width:300px;
 box-sizing:border-box;
}

Mit diesen CSS-Angaben verändert sich die Darstellung. Dasselbe HTML sieht jetzt so aus wie im rechten Teil in der Grafik:

(zum Vergrößern anklicken)

Im Bild rechts stimmt die optische Breite des Absatz-Elements mit der im CSS angegeben Breite überein. Das Element wird kleiner, weil das Padding nicht mehr zu Breite des Text-Elements dazu addiert wird. Dadurch braucht es jetzt weniger Platz im Layout.

Mit der Unterstützung von box-sizing:border-box lassen sich die Breiten-Angaben leichter berechnen und man kommt bei komplexeren Layouts nicht in Schwierigkeiten. Die Breite des Elements entspricht der optischen Breite.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.