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.