Jens Oliver Meiert

Das CSS-Boxmodell

Artikel vom 14. Dezember 2005, exklusiv f├╝r den Webkrauts-Adventskalender 2005. ISSN 1614-3124, #16.

Dieser Artikel ist stellenweise veraltet.

Alles im Internet ist eckig, selbst dann, wenn es nicht so scheint. Das Boxmodell beschreibt den rechteckigen Raum, der f├╝r alle Elemente im Dokumentenbaum generiert wird. Im Grunde einfach, wird das Boxmodell dann zur Herausforderung, wenn Browser es fehlinterpretieren: So hat es nahezu jeder Webdekorateur, -designer und -entwickler beim Internet Explorer 5 kennengelernt.

Spezifikation

Laut CSS-Spezifikation verf├╝gt der von jedem Element beanspruchte Raum (┬╗Box┬ź) ├╝ber einen Inhaltsbereich (zum Beispiel Text oder Bild) und optional ├╝ber einen diese Box umgebenden Innenabstand, Rahmen und Au├čenabstand. Die folgende Graphik veranschaulicht diese Aufteilung:

CSS-Boxmodell-Hierarchie.

Abbildung: CSS-Boxmodell-Hierarchie. (Copyright Jon HicksLizenzbestimmungen.)

Die Breite und H├Âhe des Inhalts eines Elements bestimmen sich ├╝ber seine ┬╗wirkliche┬ź Breite bzw. H├Âhe, bei einem Bild also ├╝ber die eigentlichen Ma├če des Bildes, oder ├╝ber die width- und height-Eigenschaften. Der Innenabstand wird ├╝ber die Eigenschaften padding-top, padding-right, padding-bottom, padding-left bzw. in Kurzform via padding definiert. Die Breite des Rahmens basiert analog dazu auf den Werten f├╝r border-width, die ebenfalls f├╝r jede Seite separat spezifiziert werden k├Ânnen, und die margin-Eigenschaft mitsamt ihrer ebenfalls f├╝r jede einzelne Seite verf├╝gbaren Eigenschaften komplettiert dieses Quartett.

Addiert man die Werte all dieser Eigenschaften f├╝r jeweils Horizontale und Vertikale, erh├Ąlt man die Gesamtbreite bzw. -h├Âhe eines Elements.

CSS 3 er├Âffnet mit der box-sizing-Eigenschaft die M├Âglichkeit, zu w├Ąhlen, wie Ma├čangaben tats├Ąchlich angewendet werden sollen. Das bisherige Verhalten wird ├╝ber den Startwert content-box abgebildet.

Probleme mit dem Boxmodell

├ťbertr├Ągt man das Boxmodell in die Realit├Ąt, mag man argumentieren, dass width und height die Gesamtma├če eines Elements, also inklusive seiner ┬╗Verpackung┬ź (Innenabstand und Rahmen) sowie Au├čenabstand, festlegen m├╝ssten, und nicht nur die Ma├če des Elementinhalts. Genau diesen Ansatz verfolgt der Internet Explorer 5 (also 5.0/5.5), und dies sorgt f├╝r Probleme. W├Ąhrend zum Beispiel alle anderen Browser ein Element mit einer ├╝ber width spezifizierten Breite von 200 Pixeln und einem Innenabstand von 50 Pixeln als insgesamt 300 Pixel breit annehmen, bezieht der Internet Explorer 5 diese insgesamt 100 Pixel Innenabstand in die Gesamtbreite ein ÔÇô das Element ist also 200 Pixel breit, wobei davon dem Elementinhalt nur noch 100 Pixel zur Verf├╝gung stehen.

Dieses Beispiel in vereinfachter Darstellung:

falsch
richtig

F├╝r ┬╗Standardistas┬ź unerheblich, aber dennoch notwendig, erw├Ąhnt zu werden: Auch der Internet Explorer 6 zeigt dieses Verhalten, wenn er in den sogenannten Kompatibilit├Ątsmodus springt, es also kein oder ein falscher Dokumenttyp verwendet wird, oder diesem etwas voransteht (zum Beispiel eine eigentlich standardkonforme XML-Verarbeitungsanweisung ├á la <?xml version="1.0" encoding="utf-8"?>).

Boxmodell-Hacks

Eine ganze Reihe von Wegen steht zur Verf├╝gung, wenn es darum geht, dieses Fehlverhalten vom Internet Explorer zu adressieren, und in der Regel handelt es sich um generelle Methoden, um ihm alternative CSS-Deklarationen vorzugeben oder welche vorzuenthalten. Aufgrund der Vielzahl von M├Âglichkeiten sollen hier nur drei besondere Methoden er├Ârtert werden. Interessierte finden aber unter anderem jeweils bei css-discuss und Chris Nott eine ├ťbersicht ├╝ber weitere Hacks.

Zur Terminologie: Es wird nicht nur im Hinblick auf das Boxmodell gerne von ┬╗Hacks┬ź gesprochen, oftmals ist diese Bezeichnung jedoch nicht korrekt. Manche Methoden basieren auf Bugs in den jeweiligen Implementierungen (wie Tantek ├çeliks Boxmodell-Hack), andere auf propriet├Ąren Erweiterungen (wie ┬╗Conditional Comments┬ź), andere wieder auf noch nicht ├╝berall implementierten Bestandteilen der CSS-Spezifikation (wie bei der Anwendung von Kindselektoren mit dem >-Kombinierer).

Der Klassiker: Tantek Çeliks Boxmodell-Hack

Tantek ├çeliks Boxmodell-Hack basiert auf einem ┬╗Parsing Bug┬ź im Internet Explorer, der es ├╝ber das Setzen der voice-family-Eigenschaft mitsamt einem ┬╗fiktiven┬ź Wert zul├Ąsst, Deklarationen sowohl f├╝r den 5er Internet Explorer als auch ┬╗korrigierend┬ź f├╝r alle anderen Browser zu setzen.

Auf das obige Beispiel bezogen w├╝rde dieser Hack wie folgt angewandt werden:

div#beispiel {
  padding: 50px;
  width: 300px; /* nur IE 5.x */
  voice-family: "\"}\"";
  width: 200px; /* alle anderen User-Agents */
  voice-family: "\"}\"";
}

Bei dieser Variante handelt es sich um eine Abwandlung der Originalversion. Zum einen verzichtet sie auf die Deklaration voice-family: inherit;, zum anderen f├╝gt sie der ┬╗korrigierenden┬ź zweiten width-Zuweisung noch einmal die Deklaration voice-family: "\"}\""; an. Dies ist notwendig, damit etwa eine nachfolgende Regel nicht f├Ąlschlicherweise vom Internet Explorer ignoriert wird, ein Effekt, der sonst zu beobachten ist.

Der Kontroverse: Conditional Comments

Conditional Comments sind mittlerweile ein popul├Ąres Rezept, um dem Internet Explorer gezielt Extraw├╝rstchen zu braten. Als propriet├Ąrer Kommentar, der eine Abfrage auf einzelne Versionen des Internet Explorers erm├Âglicht, schenken sie einem die grunds├Ątzliche Option auf nur f├╝r den Internet Explorer verst├Ąndliche und zug├Ąngliche Inhalte. So kann man allen Internet Explorern mit Versionsnummer 5 ├╝ber folgende Notation ein spezielles Stylesheet zuweisen und dar├╝ber beispielsweise dessen Boxmodell-Probleme behandeln:

<!--[if IE 5]>
  <link rel="stylesheet" href="ie5.css">
<![endif]-->

Von der Verwendung von Conditional Comments wird jedoch abgeraten. Dies hat (mehr als) drei gewichtige Gr├╝nde: Erstens entsprechen sie keinem offenen Standard und unterliegen somit weder der Kritik noch dem Dialog wie W3C-Standards. Zweitens ignorieren sie die HTML-Spezifikation, die vorgibt, dass Kommentare vom Parser ignoriert werden sollen. Drittens nehmen sie die M├Âglichkeit, alle CSS-Zuweisungen in einem einzelnen Stylesheet zu verwalten (und warten!).

Der Einfache: Alternativer Boxmodell-Hack

Eine weitere M├Âglichkeit besteht darin, leere CSS-Kommentare unmittelbar vor (f├╝r den Internet Explorer 5.0) und nach (f├╝r den Internet Explorer 5.5) dem Doppelpunkt einer Eigenschaft zu setzen, so dass die betroffene Deklaration von eben diesen Browsern ignoriert wird. F├╝r den Internet Explorer 5 wird dann vor dieser von ihm zu ignorierenden Deklaration eine entsprechend alternative Zuweisung vorgenommen:

div#beispiel {
  padding: 50px;
  width: 300px; /* nur IE 5.x */
  width/**/:/**/ 200px; /* alle anderen User-Agents */
}

Auch bei dieser Methode verwenden wir Eigenschaften redundant, aber sie ist im Gegensatz zu Tantek Çeliks Boxmodell-Hack einfacher zu memorieren und entspricht gegenüber Conditional Comments keinem unkonformen oder nachteiligen Vorgehen.

├ťber mich

Jens Oliver Meiert, am 29. April 2020.

Ich bin Jens Oliver Meiert, und ich bin ein Engineering Manager und Autor. Ich habe als technischer Leiter f├╝r Google gearbeitet, bin dem W3C und der WHATWG verbunden und schreibe und begutachte B├╝cher f├╝r OÔÇÖReilly. Ansonsten experimentiere ich gerne, mitunter auch in den Bereichen Philosophie, Kunst und Abenteuer. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn du Fragen oder Anregungen zu dem hast, was ich schreibe, sende mir gerne eine Nachricht.

Ähnliche Themen

Das k├Ânnte dich ebenfalls interessieren:

Schwerpunkt:

Cover: The Web Development Glossary.

Mein vielleicht umfangreichstes Buch: The Web Development Glossary (2020). Mit Erkl├Ąrungen und Definitionen zu buchst├Ąblich tausenden Begriffen der Webentwicklung und verwandten Feldern, aufbauend auf Wikipedia sowie den MDN Web Docs. Erh├Ąltlich bei Apple Books, Kobo, Google Play Books und Leanpub.

Auf dem Laufenden bleiben? Folge mir per Feed (mit englischen Beitr├Ągen) oder auf Twitter.

Fehler entdeckt? E-Mail an jens@meiert.com.

Sie sind hier: Startseite Ôćĺ Publikationen Ôćĺ Das CSS-Boxmodell

Stand: 14. Dezember 2005

Professionelle Frontend-Entwickler produzieren valides HTML und CSS.