Auf dieser Seite finden Sie diverse Grafiken und Schemata zum Anschauen und Herunterladen.

Die unten abgebildete schematische Darstellung des Boxmodells ist die Grundlage zum Gestalten von Blockboxen:

In den letzten Jahren hat ein alternatives Box-Modell namens »Border-Box« von sich reden gemacht, weil damit die zuverlässige Berechnung der Breite eines Containers viel einfacher ist. Aktiviert wird es mit der Anweisung box-sizing: border-box Besonders beim Floaten ist das superpraktisch

Mehr zu diesem neuen Box-Modell erfahren Sie zum Beispiel hier:

• Buch Einstieg in CSS
• Buch Flexible Boxes
• Artikel Das etwas andere Box-Modell mit {box-sizing:border-box} bei Dr. Web

So let's border-box. 

Das Boxmodell für Inlineboxen unterscheidet sich leicht von der Variante für Blockboxen. Es wird in Kapitel 8 angedeutet und in Kapitel 23 detailliert erklärt (Abbildung 23.2 auf Seite 458).

Inlineboxen kennen also keinen oberen und unteren Außenabstand. Die Breite (width) wird nur durch den Inhalt des HTML-Elementes bestimmt, die Höhe (height) durch den berechneten Wert für die Schriftgröße (font-size). Der wiederum sollte in einem lesetechnisch günstigen Verhältnis zu line-height stehen. 

Im Kapitel »Kaskade, Vererbung und Standardwert« geht es darum, wie der Browser das korrekte CSS zur Darstellung eines HTML-Elementes findet.

Nachdem er aus dem Quelltext einen Dokumentenstammbaum erstellt hat, muss er für jedes zu gestaltende Element für jede CSS-Eigenschaft einen eindeutigen Wert finden. Sollte er in den Stylesheets für eine bestimmte CSS-Eigenschaft genau einen Wert finden, nimmt er ihn. Klare Sache. Wenn es hingegen keinen oder mehrere Werte gibt, helfen dem Browser drei Konzepte bei seiner Entscheidung: Kaskade, Vererbung und Standardwert.

Diese drei Konzepte werden in der folgenden Grafik vorgestellt.