Das Boxmodell

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen das CSS-Boxmodell besser verstehen und möchten wissen, auf welche Weise Innenabstände (margins), Außenabstände (paddings) und Rahmen (borders) den Inhalt umgeben.

Lösung

Jedes Block-Element (z.B. p oder div) besitzt eine obere, rechte, untere und linke Begrenzung. Diese Begrenzungen bestehen aus drei »Schichten«, die den Inhalt umgeben. Jedes Block-Element besitzt daher vier Bereiche:

Inhaltsbereich (content)

Der eigentliche Inhalt, wie etwa Text, Bilder, Java-Applets und andere Objekte. Der Inhaltsbereich befindet sich in der Mitte der Box.

Innenabstand (padding)

Umgibt den Inhaltsbereich.

Rahmen (border)

Die nächste Schicht umgibt den Innenabstand und definiert den Rahmen der Box.

Außenabstand (margin)

Transparenter Bereich, der, beginnend an der Außenkante eines möglichen Rahmens, die übrigen Schichten umgibt.

Der Standardwert für die Breite des Außenabstandes (margin) ist 0. Ein Außenabstand beginnt also bündig mit der Außenkante des Rahmens. Ein Rahmen (border) mit dem Wert 0 ist seinerseits bündig mit der Außenkante des Innenabstandes (padding).

Hat der Innenabstand (padding) ebenfalls den Wert 0, so ist er offensichtlich bündig mit der Außenkante des Inhaltsbereichs. In der folgenden Abbildung sehen Sie eine grafische Darstellung des Boxmodells.

Abbildung: Das CSS-Boxmodell in der Vorder- und Seitenansicht.

Diskussion

Um das Boxmodell besser zu verstehen, können Sie sich einen Pappkarton auf dem Fußboden vorstellen. Wenn Sie in den Karton hineinsehen, erkennen Sie dessen vier Seiten: oben, rechts, unten und links. Der Karton (die Box) kann klein oder groß sein, je nachdem, welche Werte Sie für dessen Höhe (height) und Breite (width) vergeben.

Wenn Sie ein paar Bücher in die Kiste packen, sieht der Inhalt in etwa so aus wie in dieser Abbildung:

Abbildung: Ein Block-Element mit gefülltem Inhaltsbereich.

Um die Ränder der Box besser erkennen zu können, umgeben wir sie mit einem dünnen Rahmen (siehe die nächste Abbildung):

Abbildung: Der Inhaltsbereich wird mit einem Rahmen umgeben.

In dieser Darstellung überschneiden sich die Bücher oder sitzen einander ziemlich dicht auf der Pelle. Das ist für die Bücher nicht besonders gut – zumal es sich um Sammlerstücke handelt. Das Problem können Sie lösen, indem Sie zwischen den Büchern mit Hilfe der Eigenschaft padding Innenabstände definieren, die den nötigen Abstand schaffen. Bei größeren Innenabständen wird für jedes Buch mehr Platz reserviert. Dadurch passen nicht mehr so viele Bücher in die Box. In der nächsten Abbildung können Sie sehen, wie sich die Innenabstände auf die Darstellung auswirken:

Abbildung: Die Darstellung der Bücherliste mit Innenabständen.

Hinweis:
Obwohl die Höhe und Breite der Box mit jeweils 150px festgelegt wurden, verändern Innenabstände die Größe der Box. Diese hat, zusammen mit den Innenabständen (10 Pixel auf jeder Seite, oben und unten) nun eine Höhe und Breite von je 170 Pixeln.

Für weitere Bücher können Sie einfach eine zweite Box anlegen, die direkt unterhalb der ersten platziert wird (siehe die folgende Abbildung):

Abbildung: Eine weitere Bücherliste wurde hinzugefügt.

Um zu vermeiden, dass die Boxen direkt aneinanderstoßen, können Sie den Platz dazwischen mit Hilfe der Eigenschaft margin anpassen (siehe nächste Abbildung):

Abbildung: Die Block-Elemente wurden mit Außenabständen versehen.

Um die beiden Boxen besser voneinander zu trennen, können Sie die Eigenschaft border modifizieren. Wie bei Innen- und Außenabständen können Sie auch hier eine beliebige Breite zuweisen (siehe die folgende Abbildung). Außerdem verändern wir den Rahmenstil, sodass dieser nun als doppelte Linie dargestellt wird:

Abbildung: Die Rahmenbreite beträgt nun 5 Pixel und der Rahmen wird als doppelte Linie dargestellt.

Bis jetzt haben Sie das Boxmodell für beide Elemente gleichermaßen verändert. Sie haben die Innen- und Außenabstände sowie den Rahmen an allen Seiten der Elemente gleichermaßen angepasst. Sie können Änderungen aber auch nur für bestimmte Seiten vornehmen.

Wenn Sie die rechte Seite des Rahmens für das div-Element (siehe die folgende Abbildung) anpassen möchten, während die übrigen Seiten unverändert bleiben, können Sie beispielsweise schreiben:

Abbildung: Anpassungen für den rechten Rahmen der Box.

Auch die anderen Seiten lassen sich einzeln anpassen. Um die Eigenschaft margin für die einzelnen Seiten separat zu setzen, können Sie Folgendes schreiben:

Durch spezielle Anpassungen der Seiten und der dazugehörigen Eigenschaften können Entwickler die Darstellung ihrer Webseiten sehr genau steuern.

Warnung:
Microsoft implementiert das Boxmodell in seinem Internet Explorer für Windows bis zur Version 5.5 auf eigene Weise. Weitere Informationen zu dieser Problematik und mögliche Lösungen finden Sie im Rezept Besondere Werte für Internet Explorer 5.x für Windows.

Siehe auch

Das CSS 2.1-Boxmodell und das BrainJar-Boxmodell.