Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Peter Müller 18. Februar 2013

CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}

Das klas­si­sche Box-Modell war noch nie beson­ders intui­tiv. In CSS3 wur­de mit {box-sizing:border-box} eine Alternative vor­ge­stellt, die beson­ders bei fle­xi­blen Layouts fast nur Vorteile hat.

real-world-box

Das klassische Box-Modell {box-sizing: content-box}

Wenn Sie im ana­lo­gen Alltag die Breite einer Kiste ange­ben, dann ist damit immer die Entfernung von einem Außenrand zum ande­ren gemeint, inklu­si­ve Innenabstand (padding) und Rand der Kiste (border).

Beim klas­si­schen Box-Modell ist das anders. Dort defi­niert width nur die Breite des Inhaltsbereichs und Angaben für padding oder border wer­den hin­zu­ge­fügt. Visuell sieht die­ses klas­si­sche Box-Modell so aus (nur zur Erinnerung):

boxmodell_content-box-w640

Man muss manch­mal ein biss­chen rech­nen oder trick­sen bis alles passt. Bei Layouts mit fes­ten Pixelbreiten ist das zwar manch­mal etwas ner­vig, aber durch­aus mach­bar.

Doppelte HTML-Elemente als Notlösung

Wirklich pro­ble­ma­tisch wird das klas­si­sche Box-Modell erst, wenn inner­halb einer Box die Angaben für width, padding, border oder margin ver­schie­de­ne Einheiten ver­wen­det wer­den, denn dann lässt sich die Gesamtbreite die­ses Elements nicht mehr zuver­läs­sig bestim­men:

  • Eine mit <aside class="sidebar"> erstell­te Layoutspalte soll eine Breite von 20% und ein padding links und rechts von jeweils 10px bekom­men.
  • Frage: Wie viel Platz muss man für die Sidebar im Layout reser­vie­ren?
  • Antwort: Keine Ahnung. Das kann man nicht zuver­läs­sig berech­nen.

Damit fle­xi­ble Layouts aber nicht zur rei­nen Lotterie ver­kom­men, hat man sich behol­fen, indem man das HTML-Element ver­dop­pelt und die Box-Modell-Eigenschaften auf die bei­den Elemente ver­teilt:

  • Innerhalb von aside wird ein zusätz­li­ches div ein­ge­fügt.
  • aside bekommt width:20% zuge­wie­sen.
  • Das inne­re div bekommt even­tu­el­le Angaben für padding, border oder auch margin.

Dadurch hat die Sidebar unab­hän­gig vom padding & Co immer eine Breite von 20% und wird im wahrs­ten Sinne des Wortes bere­chen­bar.

Diese Dopplung von HTML-Elementen ist heu­te so selbst­ver­ständ­lich, dass wir fast ver­ges­sen haben, dass es ursprüng­lich mal eine Notlösung war.

Boxen wie im richtigen Leben mit CSS3: {box-sizing: border-box}

Fast unbe­merkt von der brei­ten Öffentlichkeit haben die Browser so nach und nach ein zwei­tes Box-Modell ein­ge­baut, das etwas anders funk­tio­niert. In die­sem Modell sind padding und border in der Angabe von width bereits ent­hal­ten. Es heißt border-box, weil die Breite der Box von border bis border gemes­sen wird. Grafisch dar­ge­stellt sieht das so aus:

boxmodell_border-box_kraken-w640

Im Webdesigner-Alltag ist die­se unschein­ba­re Änderung beim Layouten sehr prak­tisch. Bei der wei­ter oben beschrie­be­nen Sidebar spart man damit zum Beispiel das dop­pel­te, inne­re HTML-Element:

  • Zunächst wird .sidebar { box-sizing:border-box} defi­niert.
  • Dann wird dem Element z. B. width:20% und ein belie­bi­ges padding oder border zuge­wie­sen.

Fertig.

Mit der border-box ist es völ­lig egal, wie viel padding oder border ein Element bekommt, denn die­se Werte wer­den von der Breite abge­zo­gen und nicht hin­zu­ge­fügt. Was in den meis­ten Fällen ein­fach nur prak­tisch ist. Die Sidebar wird auch ohne Dopplung der HTML-Elemente bere­chen­bar.

Ein mit margin defi­nier­ter Außenabstand kommt übri­gens immer noch hin­zu, aber dass ist bei den Boxen im rich­ti­gen Leben auch so.

Die border-box im Alltag

Wenn man erst ein­mal so rich­tig begrif­fen hat, wie prak­tisch die­se border-box sein kann, kommt natür­lich unwei­ger­lich die Frage nach der Browserunterstützung auf. Und hier ist die Antwort:

caniuse-com-border-box-kraken-w640

Hey hey, sogar IE8 ver­steht das. Unbelievable. Mozilla benö­tigt zwar noch einen Prefix, aber wer den IE7 erst ein­mal drau­ßen vor las­sen kann, könn­te sein Stylesheet mit fol­gen­dem Style begin­nen:

* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}

Und genau das emp­fiehlt Paul Irish in sei­nem Blog-Artikel vom 1. Februar 2012.

Fazit

Die border-box ist eine mehr als will­kom­me­ne Alternative zum klas­si­schen Box-Modell, aber bevor Sie kom­plett auf die border-box umstei­gen, soll­ten Sie die wei­ter unten gelis­te­ten Artikel stu­die­ren. Als Basis für fle­xi­ble Layouts wird die border-box wahr­schein­lich schon ziem­lich bald selbst­ver­ständ­lich sein.

Lesenswerte Links zum Artikel

Hier eini­ge lesens­wer­te Artikel, die gleich­zei­tig auch ein biss­chen den Werdegang von vor­sich­ti­gen Versuchen bis zur Empfehlung wider­spie­geln:

Und hier noch zwei Referenzen:
* W3C, CSS3-ui box-sizing
* Mozilla Developer Network, box-sizing

Bildquelle Holzbox: 16 Miles of String via pho­to­pin cc

(dpe)

Peter Müller

Peter Müller

Ich bin Autor, Dozent und Webworker. Meine Spezialität ist es, komplizierte und 'trockene' Sachverhalte auf einfache und unterhaltende Weise darzustellen. Sie kennen mich vielleicht durch meine Bücher wie "Einstieg in WordPress", "Flexible Boxes" oder "Einstieg in CSS".

15 Kommentare

  1. Und schon bin ich wie­der ein Stück schlau­er. Danke ;)

  2. Womit wir wie­der by Microsoft’s ursprüng­li­chem Box-Model wären …

  3. Das ein­zi­ge Problem was ich bei dem Vorschlag von Paul Irish sehe, ist das Skripte wie Mediabox nicht mehr rei­bungs­los funk­tio­nie­ren. Das Javascript muss das neue Boxmodel unter­stüt­zen – bes­ser gesagt darf es kei­ne eige­nen Berechungen für Padding und Border anstel­len.

    Solange wer­de ich per­sön­lich den Sternselektor mit dem neu­en Boxmodell nicht ver­wen­den. Das hat mich mal 2 Stunden debug­ging gekos­tet …

  4. Sehr inter­es­san­ter Beitrag! Es gab schon eini­ge Fälle in denen ich mehr­mals die Werte “width” und “pad­ding” anpas­sen muss­te. Das blö­de hier­bei war immer das Berechnen neu­er Werte. Mit die­ser Lösung wird das gan­ze etwas dyna­mi­scher. Ich stim­me aber zu, dass das Konstrukt bei Bildern nicht sehr hilf­reich ist, son­dern vor­wie­gend bei Text-Elementen.

    • Bei den Bildern sehe ich auf Anhieb zwei ein­fa­che Möglichkeiten:

      1. CSS3 box-shadow statt Rahmenlinien per bor­der
      2. img { box-sizing: con­tent-box; }

      Damit ist dann alles wie­der im Lot ;-)

      • Workarounds fin­det man immer. Wenn man aber Schatten tat­säch­lich braucht, dann ist das nicht sinn­voll anwend­bar.

  5. Wie immer gut ver­ständ­lich und zum Schmunzeln anre­gend geschrie­ben. Sehr inter­es­sant, die­se Entwicklung des Boxmodells. In etli­chen Jahren wird man wohl nur noch müde lächelnd auf die “schreck­li­chen” Zeiten der Browseroldies zurück­bli­cken.

    DANKE für den Artikel. :-)

  6. Ist es nicht phan­tas­tisch, dass das ehe­mals “kaput­te Boxmodell” des IE5 (und IE6 im Quirks-Modus) fröh­li­che Urständ als “moder­nes Boxmodell” fei­ert? Schade, dass man den IE7 nicht in den Quirks-Modus für die­ses Boxmodell schi­cken kann. Da hilft dann nur ein extra CSS oder JavaScript. Aber glück­li­cher­wei­se wird der Browser immer unbe­deu­ten­der.

    Mal schau­en, was als Nächstes vom alten IE rüber­ge­ret­tet wird. Einige CSS3-Eigenschaften sind ja ver­bes­ser­te Entsprechungen von IE-Filtern. Auch die neu­en CSS-Filter gab es ja schon­mal im IE :-)

    • Im aller­ers­ten “Little Boxes” trug der Abschnitt über das “kaput­te Box-Modell” den Titel “Das etwas ande­re Box-Modell des IE5”. Also genau wie der Artikel hier. Diese klei­ne Ironie konn­te ich mir nicht ver­knei­fen ;)

    • Es ist schon etwas anders. Es wäre ein­mal eine gute Idee, ein­fach eine Berechnungsmöglichkeit anzu­bie­ten. Sodass man also bei­spiels­wei­se ange­ben kann: “width: (20px + 30%)” bei­spiels­wei­se.

      box-sizing:border-box ist bei­spiels­wei­se bei Grafiken mit Border und pad­ding nicht sinn­voll anwend­bar, weil man dann die Größenangabe inner­halb img inklu­si­ve pad­ding und bor­der machen muss. Wenn also ein Bild umran­det dar­ge­stellt wer­den soll mit pad­ding und bor­der und das ins­ge­samt 5px aus­macht muss man die Bildgröße um jeweils 10px grö­ßer ange­ben. Bei Browsern, die den Befehl nicht ver­ste­hen, wird das Bild ver­grö­ßert dar­ge­stellt und wenn man glo­bal über CSS pad­ding und/oder ändert muss man dann bei jedem Bild ent­spre­chend die Bildgröße ändern.

      Also ein­fach eine Berechnungsmöglichkeit bei Größenangaben dazu­neh­men, das ist weit­aus fle­xi­bler als sol­che gedan­ken­lo­sen Basteleien. Dann schaut das bei­spiels­wei­se so aus: width: (300px – pad­ding – bor­der). Ich ver­ste­he nicht, was dar­an so schwie­rig sein kann.

      Jeder nur mit­tel­mä­ßig begab­te Grafiker hät­te eine Festlegung eines in sich logi­schen und fle­xi­blen CSS inner­halb einer Woche kom­plett fer­tig. Es ist haar­sträu­bend, wel­chen Unfug hier offen­bar dum­me Wichtigtuer in jah­re­lan­gen Sitzungen da als Standard pro­du­zie­ren.

      • Ich will ja hier kei­ne Kommentar-Leichen schän­den, aber das mit der Berechnung geht oft unter!
        Man KANN mit CSS rech­nen. Nutze ich mitt­ler­wei­le stän­dig:
        #div { width: calc(100% – 200px) } oder bei einer ul, die fünf lis mit pad­ding ent­hält: ul { height: calc(5*(10px /* höhe */ + 20px /* pad­ding */) }

        Falls hier noch jemand drü­ber­stol­pert :)

  7. Für Kompatibilität mit älte­ren Android-Browser darf man auch ruhig noch das -web­kit-Prefix zusätz­lich nut­zen :)

  8. Interessant das box-sizing noch mit Präfix bei Firefox ist. Dachte die woll­ten die Präfixe los­wer­den …

Schreibe einen Kommentar zu Peter Müller Antworten abbrechen

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