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:
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
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.