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
undtext-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.
Kommentare
Peter Müller
am 04.12.2007 - 09:33
Schönen Dank für den kurzen, knackigen Überblick zu "Kisten und Kästchen".
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
oderol
, 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.
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 perdisplay:inline
darstellt. Entsprechende Fragen habe ich in Foren schon des öfteren mal gesehen ;-)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 ...David Maciejewski (Webkraut)
am 04.12.2007 - 10:22
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.
Eric Eggert
am 04.12.2007 - 12:42
Zum Bild: Peter Müller hat uns erlaubt seine Darstellung zu verwenden, die auch in meinen Augen die bessere ist. Vielen Dank.
Peter Müller
am 04.12.2007 - 13:25
@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.
Susanne Jäger
am 04.12.2007 - 13:45
@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 ...
Achim H
am 14.12.2007 - 04:36
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
Ralph
am 14.04.2008 - 21:28
Danke für die sehr schöne Zusammenfassung des Artikels und den Hinweisen in den Kommentaren, vor allem von Peter Müller.
Ralph
Die Kommentare sind geschlossen.