Webkrauts: Für mehr Qualität im Web.

Artikel

Von Kisten und Kästchen

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.

Zur Autorin:

Susanne Jäger lebt und arbeitet in Berlin. Die Begeisterung für Stylesheets und die damit verbundenen Ideen einer konsequenten Trennung von Inhalt und Darstellung, Medienunabhängigkeit und Flexibilität haben sie seit dem ersten Kontakt 1997 nicht mehr verlassen. Im Netz ist sie vor allem in Mailinglisten und im Usenet unterwegs.

(Bildquelle Boxmodell: Peter Müller/Little Boxes)

Info:

Von Kisten und Kästchen ist Beitrag Nr. 317

Autor:

Susanne Jäger am 4. Dezember 2007 um 00:01

Kategorie:

Adventskalender 2007

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   Schönen Dank für den kurzen, knackigen Überblick zu "Kisten und Kästchen".

   Block-Boxen bilden das Gerüst eines Layouts

   Ich habe bei Michael Bowers in "CSS Design Patterns" ein interessantes Konzept gelesen. Er unterscheidet bei den Block-Elementen zwischen "structural", "terminal" und "multi-purpose:

   Strukturierende ("structural") Block-Elemente sind z. B. ul oder ol, die nur andere Block-Elemente aber keinerlei Inhalt enthalten dürfen. "Inhalt" definiert er übrigens als "Text" und "Inline-Elemente", wenn ich mich richtig erinnere.
   Abschließende ("terminal") Block-Elemente wie z. B. p beenden die Strukturierung und enthalten Inhalt, aber keine anderen Block-Elemente.
   Mehrzweck-Elemente ("multi-purpose") wie div können sowohl Block-Elemente als auch Inhalt enthalten.

   Diese Unterscheidung erleichtert (mir zumindest) das Merken, welches Element in welchem stehen darf.

   Diese Vorgaben können im CSS mit der display-Eigenschaft überschrieben werden.

   Was ich in dem Artikel noch etwas deutlicher herausstellen würde ist, dass die Überschreibung der Box-Eigenschaften mit display nur die Darstelltung Box betrifft, nicht den in der HTML-Spezifikation beschriebenen Charakter des Elements.

   Im Klartext: Ein Konstrukt wie <p><h2>Inhalt</h2></p> ist auch dann nicht valide, wenn man h2 per display:inline darstellt. Entsprechende Fragen habe ich in Foren schon des öfteren mal gesehen

   Bildquelle Boxmodell

   Bei den meisten Abbildungen des Box-Modells ist zumindest für Einsteiger irreführend, dass padding und "Inhaltsbereich" in verschiedenen Farben dargestellt werden. Das suggeriert, dass per CSS eine getrennte Farbgebung möglich ist, wat ja nu nich geht …

   Kommentar von Peter Müller - 4. Dezember 2007 um 09:33

2. 2.
   

   Ich finde die Bezeichnungen Blockboxen und Inlineboxen ziemlich irreführend, weil ich bei einer Box zwangsläufig immer an einen großen schweren Kasten denke, der nichts neben sich duldet.
   Besser finde ich die Bezeichnung Blockelemente und Inlineelemente. Die Verwendung von "Element" statt "Block" nimmt den Wörtern die Visualisierung und es bleibt die Struktur: "Block" und "Inline". Block ist ein Block und geht immer bis zum Rand, Inline ist innen.
   So zumindest würde ich es das erklären.

   Kommentar von macx - 4. Dezember 2007 um 10:22

3. 3.
   

   Zum Bild: Peter Müller hat uns erlaubt seine Darstellung zu verwenden, die auch in meinen Augen die bessere ist. Vielen Dank.

   Kommentar von Eric Eggert - 4. Dezember 2007 um 12:42

4. 4.
   

   @Eric
   Gern geschehen, aber so fundamental war meine Anmerkung gar nicht gemeint.

   @macx
   Element und Box gibt es beides. Motto:

   "Im Quelltext Element, am Bildschirm eine Box"

   Block-Elemente erzeugen Block-Boxen, Inline-Elemente Inline-Boxen (oder Inline-Block-Boxen wie bei Grafiken). Und Susanne hat ja schon angesprochen, dass es da noch diverse Mitteldinger gibt …

   Im Englischen wird fast jedes viereckige Ding mit was drin als Box bezeichnet. Zigarettenschachteln
   ebenso wie Häuser oder DVD-Hüllen.

   Kommentar von Peter Müller - 4. Dezember 2007 um 13:25

5. 5.
   

   @Peter: Danke für den Hinweis auf die "Design Patterns", das muss ich mir mal genauer anschauen.
   Mit dem Hinweis auf "Styling ändert nichts an HTML-Regeln" hast du selbstverständlich völlig recht, der Passus ist leider einer rigiden "nicht mehr als 400 Worte"-Vorgabe zum Opfer gefallen. Eigentlich bin ich ja geschwätziger.

   @macx: Ich habe sehr bewusst den Begriff Boxen gewählt, da sich der Artikel ausschliesslich mit der Frage der Darstellung – dem CSS-gesteuerten Layout befasst. Elemente bilden und beschreiben die Struktur im Markup; die Boxen, Kästen oder Schachteln, die ich hier am Wickel habe, beziehen sich dagegen explizit auf die visuelle Darstellung. Vielleicht arbeite ich ja schon zu lange mit diesen Begriffen, aber meine Assoziation zu "Box" ist eher eine Art Karton-Stapel, mit vielfältigen Inhalten und nicht ein großer abgeschlossener Block.
   Das Bauprinzip der ineinanderverschachtelten Boxen/Blöcke/Rechtecke ist m.E. für das Verständnis und die Konstruktion komplexerer Seiten – möglicherweiser sogar mit rund oder polygon "erscheinenden" Bestandteilen – von zentraler Bedeutung. Richtig spannend wird es nämlich erst, wenn es einmal darum geht, inline-Boxen/Kästen/Rechteck, die sich nicht wie erwartet verhalten, zu zähmen. Aber das ist eine andere Geschichte …

   Kommentar von Susanne Jäger - 4. Dezember 2007 um 13:45

6. 6.
   

   Erwähnen sollte man vielleicht noch:

   dass im Internet-Explorer ein nicht angegebener bzw. nicht vollständiger Dokumenttyp (Quirksmodus) die Darstellung von blockbildenden Elementen hinsichtlich des Boxmodel falsch interpretiert wird.

   dass gefloatete bzw. absolute/fix-positionierte Blockelemente ihre spezifische Breite verlieren und nur noch so breit dargestellt werden, wie der breiteste Inhalt in diesem Element ist.

   dass jedes HTML-Element, auch <html>, eine Kiste darstellt, die formatiert werden kann.

   mfg Achim

   Kommentar von Achim H - 14. Dezember 2007 um 04:36

7. 7.
   

   Danke für die sehr schöne Zusammenfassung des Artikels und den Hinweisen in den Kommentaren, vor allem von Peter Müller.

   Ralph

   Kommentar von Ralph - 14. April 2008 um 21:28

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.