Inhaltsbereich

Downloads

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

Das Boxmodell für Blockboxen

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

Little Boxes - Das Boxmodell für Block-Elemente als visuelles Schema
Schema für das klassische Content-Box-Modell

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

Das alternative Border-Box-Modell
Schema für das neuere Border-Box-Modell

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

So let's border-box. 

Das Boxmodell für Inlineboxen

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.