HTML - Medien und Gestaltung

1.3.2 Das Box-Modell der Formatierung für die visuelle Darstellung

Für die Darstellung der Elemente eines Dokuments müssen diese Elemente mit ihrem Inhalt in einem Darstellungsbereich (z.B. einem Browser-Fenster) angeordnet werden. Vereinfachend dargestellt geschieht dies im CSS-Modell durch Kästen (wir verwenden im Folgenden die englische BezeichnungBox), die aus einem Inhalts- und einem Randbereich bestehen.

Ein CSS-Layout wird aus rechteckigen Boxen aufgebaut. Es gibt also keinen ovalen oder runden Layout-Elemente. Die folgende Abbildung zeigt den konzeptionellen Aufbau einer Box in CSS und stellt die verschiedenen Arten von Rändern dar, die den Inhalt einer Box umgeben können. Der Bereich zwischen dem Inhalt (z.B. ein Textfragment) und dem sichtbaren Rand (Border) wird Padding (Füllung) genannt. Der Bereich zwischen dem sichtbaren Rand und der Außenkante des Rahmens heißt Margin (Rand, Begrenzung; hier: äußerer Rand). Der für die Anordnung beim Darstellungsprozess wichtige Platzbedarf einer Box hängt demnach vom Platzbedarf für die Darstellung des Inhalts und der verschiedenen Ränder ab.

Abb 2 Das Box-Modell von CSS

Die Breiten der Ränder sind Eigenschaften der darzustellenden Elemente, die über CSS-Regeln verändert werden können. Beispielsweise wurde im Style Sheet in unserer Beispieldatei style2.css der linke Rand (margin-left) für Elemente vom Typ p auf 3 Einheiten gesetzt. In vielen Fällen haben die Ränder für Elemente die Breite 0, das heißt, es wird kein sichtbarer Rand dargestellt und kein Abstand bei der Formatierung eingehalten.

Der CSS-Standard sieht vor, dass die Breiten der Ränder eines Elements zu der Breite des Inhalts hinzuaddiert werden. Wenn ein Textabschnitt 200 Pixel breit ist, und als Werte für margin, padding und border jeweils 30 Pixel festgelegt wurden, sollte die daraus resultierende Box 200 + 2 x (30 + 30 + 30), also 380 Pixel breit sein. In der Version 5 des Internet Explorers wurde diese Vorgabe falsch implementiert; in diesem Browser werden die Breiten der verschiedenen Ränder abgezogen. In unserem Beispiel würde der Inhalt nur in einer Breite von 200 - 2 x (30 + 30 + 30), also 20 Pixeln wiedergegeben. Der Internet-Explorer 6 und auch Opera verfahren genauso, wenn das HTML-Dokument keine korrekte Dokumenttyp-Erklärung enthält. Die Entwickler sprechen von einem Quirks-Mode (Pfuschmodus), der dazu dienen soll, fehlerhafte HTML-Dokumente so darzustellen, wie sie vermutlich vom Autor intendiert waren. Um zu erreichen, dass Internet Explorer 6 und Opera CSS-Regeln für die Berechnung der Größe von Boxen mit explizit angegebenen Rändern korrekt verwenden, muss also der Dokumenttyp des HTML-Dokuments korrekt angegeben werden. Beim Internet Explorer 5 hilft dagegen nur ein Trick wie Tantek's Box Model Hack, siehe Tanteks Box Model Hack.

In der Regel verwenden Browser Vorgaben für die Werte der Eigenschaften border, margin und padding. Beim Entwickeln eines Style Sheet ist es manchmal sinnvoll, die Werte dieser Eigenschaften ausdrücklich auf 0 zu setzen, um unerwünschte Effekte zu vermeiden. Dies kann mit der Regel * {border: 0; -padding: 0; -margin: 0;} geschehen, die sich mit dem Jokerzeichen *, siehe 2.1.3 Der universale Selektor * auf alle Elemente eines Dokumentes bezieht.

Kommentare (1)

yavanna2006 am 18.04.2011 15:44:17

Das Bild zum Box-Modell hat einen Fehler:
padding-left und margin-left sind vertauscht.

Ihr Kommentar

Name