maettig.com

Thiemos Archiv

CSS 2.1 führt eine neue Eigenschaft display: inline-block ein, die – ihrem Namen zufolge – irgend ein Mittelding zwischen den beiden bekannten Werten sein muss. Doch was bedeutet das?

inline formatiert ein HTML-Element so, dass es sich im Grunde wie normaler Text verhält: Die Inline-Box ist nur so breit, wie es ihr Inhalt erfordert. Links und rechts daneben dürfen weitere Inline-Boxen stehen, so weit es der Platz erlaubt.

block erzeugt eine Box, die immer über die ganze verfügbare Breite reicht und sowohl vor als auch hinter sich einen Umbruch in die nächste Zeile erzwingt.

inline-block erzeugt eine Box, die sich nach Außen wie eine Inline-Box verhält, also den normalen Textfluss mitmacht, im Inneren jedoch eine Block-Box darstellt (hier ein Beispiel). Das heißt, die Inline-Block-Box darf, obwohl sie selbst in einem Inline-Kontext dargestellt wird, wiederum Inline-Elemente enthalten. Es wird so möglich, Inline-Boxen ineinander zu verschachtelt. Wozu das gut ist? Zum Beispiel für nebeneinander stehende Bilder mit Beschreibungstexten darunter. Oder für eine Karteikarten-Navigationsleiste, bei der die anzuklickenden Karteikartenreiter mehrzeilige Texte enthalten dürfen. Aber ach: Ausgerechnet Firefox 2 kann es nicht. Schade. Mit Inline-Block-Boxen könnte man sich die eine oder andere fehleranfällige Float-Konstruktion ersparen.

Nachtrag: Firefox 3.0 kann es.

Kommentare zu diesem Beitrag können per E-Mail an den Autor gesandt werden.

[ ← Zurück zur Übersicht ]

Impressum & Datenschutz