{box-sizing: border-box} Box-Modell

box-model versus box-sizing: border-box

Die Ausmaße eines (block-level-)Elements ermitteln sich nach dem „normalen“ Box-Modell mit der Formel: width + padding + border.

Ein Container mit den Eigenschaften und Eigenschaftswerten:

div {
width: 300px;
height: 300px;
padding: 40px;
border: 20px solid black;
}

nimmt demnach insgesamt:

  • (von links nach rechts): 20px (border-links) + 40px (padding, Innenabstand-links) + 300px (Breite) + 40px (padding-rechts) + 20px (border-rechts) = 20+40+300+40+20 = 420px Breite
  • und (von oben nach unten): 20px (border-oben) + 40px (padding, Innenabstand-oben) + 300px (Höhe) + 40px (padding-unten) + 20px (border-unten) = 20+40+300+40+20 = 420px Höhe

für sich in Anspruch.

Dieser Container hat folgende Eigeschaften und Eigenschaftswerte width: 300px;
height: 300px; padding: 40px; border: 20px solid rgba(255,255,255, .6)

Diese Ermitlung hat in der Vergangenheit bei einigen Codern und Webdesignern zumindest für zeitweiliges Kopfzerbrechen gesorgt, gerade bei gefloateten Elementen und solchen, denen je nach Verwendung z. B. durch Zuweisung von (dynamischen) Klassen unterschiedliche Eigenschaftswerte wie border: 20px / border: 10px – padding: 20px / padding: 0px -zugewiesen wurden. Dadurch veränderte sich der von dem Element in Anspruch genommene Platz und ein mehrspaltiges Layout konte ohne Gegenmaßnahmen so schon mal anders aussehen als beabsichtigt.

Mit der Eigenschaft box-sizing und dem Wert border:box schlägt das Herz eines Webdesigners wieder etwas höher.

div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 40px;
border: 20px solid black;
}

Ein (block-level-)Element verhält sich mit box-sizing: border-box nun so, wie man es intuitiv bei Aussenmaßen annehmen würde, nämlich Breite x Höhe! Punkt!

Padding oder Border? Kein Problem! Die Aussenmaße des Elemments verändern sich dadurch nicht!

Ich will doch eine Box mit 300px*300px und nicht darüber nachdenken müssen, wie breit vielleicht irgendein Rahmen irgendwann mal sein könnte, oder wie der Innenabstand sich ggf. einmal ändern könnte und ob das dann alles dann noch ins Layout passt, etc. Beim alten box-Modell haben wir uns meist mit einem zusätzlich (dummy-)Kontainer mit margin und padding:0 geholfen, aber das waren „Spaßelemente“, die so nicht in den Quelltext gehören.

{ width: 300px;
height: 300px; padding: 40px; border: 20px solid rgba(255,255,255, .6)}

Alles wird gut!?
Wie sind Eure Erfahrungen?

Kommentare (2)

  1. „Die Aussmasse … ermitteln sich …“ Was ist denn das und wie bitte ermitteln die sich? Können die so was überhaupt? Sind also „Aussmasse“ irgendwelche Wesen, die handeln können? Dass Kontainer im Deutschen auch anders geschrieben wird: geschenkt! und weiter geht’s: „Ein Kontainer … nimmt für sich in Anspruch …“ Wie geht das? Gegen wen erhebt er den Anspruch? Wieso kommt Ihnen nicht in den Sinn, zu schreiben: „Ein Container mit den Maßen/Werten .. bedeckt somit die Fläche … (Breite x Höhe)“.
    Aber es geht weiter: „… schägt das Herz ..“. Und was bitte sind „Spasselemente? Es heißt: Spaß. Oh je, Korrektur lesen ist Ihnen wohl unbekannt?
    Manchmal würde es nicht schaden, nicht nur die CSS-Syntax, sondern auch unsere Sprache und den Duden zu kennen und zu nutzen. Wenn Sie so programmieren, wie Sie auf diesen wenigen Zeilen (von den Zeichensetzungsschwächen ganz zu schweigen) im Deutschen Fehler machen … Gerade als ich das schrieb, kam mir der Gedanke: „Könnte es sein, der Herr programmiert auch so fehlerhaft?“ Also mal flott diese Seite hier durch die W3C-Validatoren „gejagt“. Das Fehlerergebnis ist ansehnlich, siehe z. B. Zeile 2792 der tatami-style.css „ont-size“. Wie gut, dass die Browser so fehlertolerant sind.
    Nach allem: Die o.g. Fehler, die mir beim flüchtigen Lesen aufgefallen sind, sollten Sie auf jeden Fall schneller beheben können als die Programmierfehler. Also: Ausmaße ! Denn es geht nicht um Masse, sondern um Maße. Das sind – meines Wissens – im Deutschen noch immer zwei verschiedene Begriffe?
    Gruß T. Adam

Kommentare sind geschlossen.