Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Von Kisten und Kästchen

Egal, wie eine Webseite aussieht, im Hintergrund ist das gesamte Design aus Rechtecken aufgebaut. Oder genauer: aus Boxen. Susanne Jäger erklärt es noch genauer in unserem heutigen Quickie zum Thema „Block und Inline“.

Webseiten sind immer aus Boxen zusammengesetzt, auch wenn man es ihnen manchmal nicht ansieht. CSS unterscheidet dabei einige Spezialtypen (Tabellen und deren Bestandteile, Listenelemente) und sogar Zwitter (run-in Boxen, inline-Blocks); grundlegend für das Verständnis sind aber…

Block- und Inline-Boxen

Block-Boxen

werden prinzipiell untereinander dargestellt, sie belegen im Regelfall die gesamte verfügbare Breite – typische Beispiele sind Absätze oder Listen. Existiert kein semantisch passendes Element für einen Block, kann ein <div> gewählt werden.

Inline-Boxen

werden nebeneinander platziert, erst wenn der Rand erreicht ist, werden sie in der nächsten Zeile fortgesetzt, sie belegen nur soviel Platz wie der Inhalt es erfordert – typische Beispiele sind Bilder, Links oder hervorgehobene Teile eines Textes. Existiert kein semantisch passendes Element für einen inline-Bereich, kann ein <span> gewählt werden.

Boxen basieren letztlich auf Elementen, die im (X)HTML-Code definiert sind. In Anlehnung an die Vorgaben der HTML-Spezifikation werden dabei schon im Standardstylesheet des Browsers Block- und Inline-Elemente unterschieden. Diese Vorgaben können im CSS mit der display-Eigenschaft überschrieben werden.

(Neben)Wirkungen

Einige zentrale CSS-Eigenschaften stehen nicht für alle Boxtypen zur Verfügung oder verändern sogar den Zustand einer Box.

• Inline-Boxen, die als Floats behandelt oder absolut bzw. fix postioniert sind, werden automatisch in Block-Boxen umgewandelt.
• Breiten- und Höhen-Angaben werden auf gewöhnliche Inline-Boxen nicht angewendet (Bilder sind hier eine Ausnahme). Dadurch bleiben auch einige andere Anweisungen (text-align und text-indent) wirkungslos.
• clear wird nur auf Block-Boxen angewendet.
• vertical-align ist nur für Inline-Boxen (und Tabellenzellen) wirksam
• Sämtliche druckspezifischen Anweisungen zur Steuerung des Seitenumbruchs gelten nur für Block-Boxen.

Leerzeichen oder Zeilenumbrüche zwischen Inline-Elementen werden im Gegensatz zu solchen zwischen Block-Elementen tatsächlich dargestellt. Ein übersichtlich mit Einrückungen versehener Quelltext kann dann zu unerwarteten Zwischenräumen führen.

Eine schon beinahe klassische Beschreibung unerwarteter Auswirkungen des kleinen Unterschieds hat Eric Meyer schon vor über 5 Jahren mit seiner Erklärung von seltsamen Lücken in der Darstellung von Bildern in Tabellenzellen (oder <div>s) geliefert.

Schachteln in Schachteln in …

Block-Boxen bilden das Gerüst eines Layouts, sie können (fast) beliebig ineinander verschachtelt werden. Inline-Boxen sind erst für die eigentlichen Inhalte (vor allem Texte und Bilder) sinnvoll. Mit CSS ist es zwar möglich umgebende Boxen als Inline- und innere als Block-Boxen zu definieren, die Ergebnisse solcher Konstruktionen sind jedoch nicht in jedem Fall vorhersagbar und sie sollten besser vermieden werden.