Das Box Modell

Jedes HTML-Element erzeugt ein (virtuelles) Rechteck. Ein Kästchen oder eine Box sozusagen. Eine Kiste. Welche dann mit CSS gestaltet werden kann... ... eine csskiste.

Das Boxmodell definiert einen inneren Abstand (padding), den Rahmen (border) und einen äußeren Abstand (margin) um ein Element (ein Text, eine Grafik oder ein beliebiger Bereich) herum.

Der innere Abstand padding zeigt die gleiche Hintergrundfarbe wie das Element. Margin bildet den Abstand des Elements gegen den umgebenden Block oder benachbarte Elemente und ist transparent. Zwischen padding und margin liegt border, der Rahmen. Dieser kann auch unsichtbar sein (border:none; = Standardwert).

Diese Werte (auch padding!) kommen zu einer evtl. vorhandenen Breiten- und Höhenangabe noch hinzu (siehe Grafik).

Die Grafik stammt aus dem Buch Little Boxes von Peter Müller. Wer mir ein paar Cent Provision zukommen lassen möchte, kann direkt die obigen Links verwenden, um das Buch versandkostenfrei bei Amazon zu bestellen.

Einfacher ausgedrückt

Stellen Sie sich vor, jedes Element hat einen Rahmen. Dieser kann beliebig dick sein, auch unsichtbar, und verschiedene Linienarten haben.

Innerhalb des Rahmens (Border) sorgt Padding für Abstand, damit der Inhalt nicht am Border klebt. Außerhalb des Borders hält Margin die umgebenden Elemente auf Abstand.

Die jeweils 4 Paddings, Borders und Margins können durch den Zusatz -top, -right, -bottom und -left einzeln definiert werden.

Auch sind Kurzformen erlaubt, diese werden im Uhrzeigersinn zugewiesen, beginnend oben:

margin: 10px 0 40px 1px;

entspricht:

margin-top: 10px;
margin-right: 0;
margin-bottom: 40px;
margin-left: 1px;

Linienarten

Border kann verschiedene Linienarten erhalten.

Blockelemente

Überschriften und Absätze sind Blockelemente. Diese werden, sofern man nichts anderes vorgibt, grundsätzlich so breit wie ihr Elternelement (das Browserfenster bzw. das Element, in dem sie stehen) und so hoch wie ihr jeweiliger Inhalt. Auch haben sie einen integrierten Zeilenumbruch.

Um allgemeine individuell festgelegte Bereiche festzulegen verwendet man das Blockelement <div>.

Inline-Elemente dagegen wie z.B. Anker sind untergeordnete Elemente und können in normalem Fließtext verwendet werden. Sie sind nur so breit wie ihr Inhalt. Inline-Elemente dürfen keine Blockelemente enthalten.

Das Inline-Gegenstück zu <div> ist <span>.

Über ID- oder Klassendefinitionen werden DIVs und SPANs adressiert.

Ein paar Beispiele

Beispiel 1

Diese Kiste hat einen umlaufenden Innenabstand von 20px. Der Außenabstand beträgt links und rechts 100px, damit wird die Box automatisch zentriert.

Die sichtbare Breite errechnet sich aus verfügbarer Breite des Elternelementes - (2 x 100).

Beispiel 2

Diese Box hat einen deutlich größeren linken Border. Gestalterisch kann so also ohne großen Aufwand eine Fläche erzeugt werden.

Zusammentreffende vertikale Margins verschmelzen übrigens zu einem, und zwar dem größeren (Collapsing Margins), während horizontale Margins sich addieren.

Beispiel 3

Kreativer Umgang damit erzeugt hier ein Abreiß-Kalenderblatt:

10.

Mai

Beispiel 4

Auch diese "Hinweiskiste" wurde ausschließlich per Boxmodell und CSS gestaltet und ist im Quelltext nichts weiter als ein Absatz (rechtsklicken und nachgucken). Dieser enthält eine kleine Hintergrundgrafik, einen Border, einen vergrößerten Padding-left und abweichende Farben.