CSS: Block vs. Inline

Teil 1: Vergleich

(Aus dem englischen Original ins Deutsche übersetzt)

Das Thema sind Vierecke (Boxen) und dieser Artikel ist der erste in einer Serie von drei Artikeln. Gibt es wirklich so viel über Vierecke bzw. Boxen zu sagen? Glaubt es oder nicht, das Thema ist praktisch unerschöpflich.

Wir starten mit einem einfachen Vergleich beider Konzepte (Block und Inline) in HTML und CSS. Im zweiten Teil werden wir uns das Boxmodell ansehen, welches schon ziemlich bekannt und vertraut ist. Das spannende Finale in Teil drei wird sich schließlich mit den weniger vertrauten Details der Inline-Boxen beschäftigen.

Es ist darauf zu achten, dass diese Artikelserie einen strikten Dokumenttyp voraussetzen. Wir benutzen HTML bei allem, was mit Markup zu tun hat. Diese Angaben gelten gleich für HTML 4.01 strict, XHTML 1.0 strict und XHTML 1.1.

Block vs. Inline in HTML

In HTML gibt es zwei Typen von Elementen: Block-Level Elemente und Inline-Level Elemente. Die Standards sagen wenig darüber aus, wie diese Elemente vom Browser dargestellt bzw. verarbeitet werden sollten. Aber sie erwähnen, dass Block-Level Elemente generell in einer neuen Zeile starten. Im Gegensatz zu den Inline Elementen.

Alle Browser, selbst jene mit schlechter CSS-Unterstützung, haben eine standardmäßige Darstellung jedes Elementtyps. Block-Level Elemente werden mit einem ausdrücklichen Zeilenumbruch davor und danach übertragen bzw. dargestellt, während Inline Elemente dort angezeigt bzw. dargestellt werden, wo sie im Textfluss auftauchen. Somit ist es nicht möglich, ohne den Einsatz von CSS, zwei Block-Level Elemente nebeneinander darzustellen.

Die Definition des Dokumenttyps (DTD) legt fest, welche Elemente Block-Level oder Inline sind. Wir haben keine Möglichkeit, das zu beeinflussen.

Block-Level Elemente

Block-Level Elemente enthalten normalerweise – nicht immer – andere Elemente. Meistens haben sie somit die Funktion eines Containers.

Manche Block-Level Elemente dürfen nur andere Block-Level Elemente enthalten. Ein Beispiel hierfür sind Formulare (FORM). In strikten Dokumenttypen, darf der BODY nur andere Block-Level Elemente enthalten. Mit der Folge, dass Text nur in Absätze (P) oder andere Block-Level Elemente gepackt werden darf/muss.

Andere Block-Level Elemente dürfen nur Text und andere Inline Elemente (z.B. <i>) enthalten. Das bekannteste Beispiel ist das P-Tag (für Paragraph bzw. Absatz).

Eine dritte Kombination sind Block-Level Elemente, die andere Block-Level Elemente oder Inline Elemente einschließen können. Z.B. DIV (Division bzw. Bereich) und LI (Liste).

Inline-Level Elemente

Inline-Level Elemente markieren normalerweise die semantische Bedeutung von etwas, obwohl es auch einige rein Präsentationszwecken dienende Elemente gibt, die nach den neuesten Standards erlaubt sind. Ein Beispiel für ein semantisches Inline Element ist DFN (defining instance), welches die Definition eines Ausdrucks festlegt.

Inline-Level Elemente können normalerweise nur Text und andere Inline-Level Elemente enthalten. Die Ausnahme bildet der OBJECT-Elementtyp, der (als Inline-Level Element) tatsächlich Block-Level Elemente beinhalten kann.

Kamäleons

Einige wenige Elementtypen können mal als Block-Level Elemente agieren und an einer anderen Stelle als Inline Elemente auftauchen. Beispiele sind INS und DEL (eingefügte oder gelöschte Bereiche). Der Kontext bestimmt, ob sie als Inline oder Block Elemente behandelt werden, was wiederum bestimmt, was diese Elemente dann beinhalten dürfen. Wenn sie als Block-Level Elemente eingesetzt werden, können sie weitere Block-Level Elemente oder Inline Elemente enthalten. Sind sie Inline Elemente, dann dürfen sie, wie oben definiert, nur Text oder andere Inline Elemente enthalten.

Block vs. Inline in CSS

Die Bezeichnungen Block und Inline existieren auch in CSS, wo sie verwendet werden, um zwischen unterschiedlichen Arten von Boxen zu unterscheiden. Die nicht sichtbaren Boxen, die für die Präsentation der Seiten eingesetzt werden und andere Boxentypen, z.B. das Listenelement (LI), das wir in Teil 2 behandeln werden, die je nach Kontext Inline oder Block sein können, was in Teil 3 beschrieben wird.

Es gibt zudem noch einige andere Arten, die mit Tabellen und deren Bestandteilen zu tun haben. Diese werden allerdings in dieser Artikelserie nicht behandelt.

Normalerweise erzeugen Block-Level Elemente in HTML Blockboxen (Blöcke wie beispielsweise ganze Textabsätze), während Inline-Level Elemente Inline Boxen erzeugen (die deshalb nebeneinander stehen können).

Entgegengesetzt der HTML Klassifizierung von Block-Level- und Inline Elementen, kann man mit CSS bestimmen, welche Arten von Boxen erzeugt werden. Dies geschieht mit Hilfe der Display-Eigenschaft (z.B. display: inline;). Das bedeutet, dass es so möglich ist, ein Block-Level Element dazu zu bringen, eine Inlinebox zu erzeugen oder umgekehrt.

Ein beliebter Anfängerfehler besteht darin, zu denken, dass dies den Typ eines Elements ändert, anstatt vielmehr die Art (bzw. das Aussehen) wie die erzeugte Box dargestellt wird. So geben manche für ein SPAN-Tag display:block an und versuchen dann, ein P-Tag (Textabsatz) darin unterzubringen. Das ist nicht zulässig (Denkfehler: diplay:block -> Block-Level Element -> Block-Level Element darf man in Block-Level Element packen). Wie der Name schon sagt, dient die display-Eigenschaft lediglich dazu, die Präsentation des Elements zu kontrollieren.

Wie Inline zu Block wird

Was wir bisher über Boxtypen gesagt haben, gilt lediglich für Elemente im normalen Dokumentfluss. Elemente, die „gefloated“ werden (die rechts oder links etwas anderem stehen sollen) oder absolut positioniert werden sollen (position: absolute oder position: fixed), halten sich an einen andere Art von Regeln. Sie erzeugen für gewöhnlich Block-Boxen, d.h. der errechnete Wert von „display“ ist block (-> display: block).

Für ein fließendes, absolut positioniertes Element wird die Display-Eigenschaft normalerweise ignoriert. Mit einer bestehenden Ausnahme, die wir uns als nächstes ansehen.

Überhaupt keine Box

Ein Spezialfall besteht darin, wenn wir für display den Wert „none“ angeben. Das Element erzeugt dann überhaupt keine Box. Es existiert hier faktisch keine Box. Der Unterschied ist wichtiger, als es zunächst den Anschein hat.

Für ein Element mit dem Display-Wert „none“, werden alle Float- und Position-Eigenschaften ignoriert.

Da für ein Element mit display:none keine Box erzeugt wird, ist es nicht möglich seine weiteren enthaltenen Elemente sichtbar zu machen. Dazu folgendes Beispiel:

<div style="display: none">
  <p style="display: block">Text</p>
</div>

Man könnte denken, dass dies (display:block) den Textabsatz sichtbar machen würde. Aber das ist nicht der Fall. Sobald das übergeordnete Element (<div>) keine Box erzeugt (also unsichtbar sein soll), werden die untergeordneten Elemente (<p>) ebenfalls nicht angezeigt. (Unabhängig davon, was für diese angegeben wird).

Der zweite Teil dieser Artikelserie wird sich mit den Block-Boxen und deren Eigenschaften beschäftigen.

Teil 2: Block-Boxen

Das ist der zweite von drei Teilen aus der aufregenden Welt der Vierecke. Im ersten Teil haben wir die beiden Konzepte von Block und Inline in HTML und CSS verglichen.

Im zweiten Teil werden wir uns die Block-Boxen im normalen Dokumentfluss näher ansehen und lernen, wie man mit ihnen umgeht.

Dieser Artikel beschäftigt sich, wie bereits erwähnt, mit Block-Boxen im normalen Dokumentfluss (ohne floats und nicht absolut positioniert). „Gefloatete“ oder absolut positionierte Elemente werden anders gehandhabt (Tommy Olsson hat darüber weitere Artikel geschrieben: Float Layouts und Relatively absolute).

Block-Boxen

Die folgenden Werte für die display-Eigenschaft erzeugen Kästchen bzw. Boxen:

• block
• list-item
• table (hier nicht behandelt)
• run-in (manchmal)

Run-in Boxen erzeugen manchmal Block-Boxen, manchmal Inline-Boxen. Das ist abhängig vom darauf folgenden Boxentyp. Wir werden uns das im dritten Teil dieser Serie ansehen.

Hauptblock- und anonyme Boxen

Ein Block-Level Element oder ein Element mit den oben genannten Display Werten erzeugen eine sogenannte Hauptblock-Box. Eine Hauptblock-Box enthält entweder nur Block-Boxen oder nur Inline-Boxen. Elemente, die einen Mix aus Block-Level- und Inline Elementen oder reinen Text beinhalten, erzeugen sogenannte anonyme Block-Boxen. Das führt dazu, dass die Hauptblock-Box nur noch Block-Boxen enthält. Beispiel:

<div>
  Eine Zeile Text
  <p>Textabsatz</p>
  Eine andere Zeile Text
</div>

Hier werden drei Block-Boxen erzeugt: Als erstes eine anonyme Block-Box für die Zeile Text. Eine weitere für den Textabsatz (<p>) und schließlich eine zweite anonyme Block-Box für die andere Zeile Text. In der Praxis bedeutet das natürlich, dass der Textabsatz in einer eigenen Zeile dargestellt wird, sodass es scheint, dass vor und nach dem Absatz Zeilenumbrüche erzeugt wurden.

Eine Hauptblock-Box wird zum enthaltenden (umschließenden) Block für seine nachkommenden Boxen, was dazu führt, dass diese statisch oder relativ positioniert werden (zur umgebenden Box). Für gefloatete und absolut positionierte Boxen gelten andere Regeln.

Wird das Element selbst positioniert, ist es die Hauptblock-Box, die positioniert wird. Wenn nicht, dann nimmt die Hauptblock-Box am sogenannten „block formatting context“ teil, der zu einem späteren Zeitpunkt betrachtet wird.

Boxen aus Listenelementen

Elemente mit dem Displaywert „list-item“, was der Standardwert für LI-Elemente ist, erzeugen ebenfalls Hauptblock-Boxen, wie jedes andere Block-Level Element. Normalerweise erzeugen sie zudem eine weitere Box, nämlich für das Aufzählungszeichen des Listenelements. Ist der Wert für list-style-position „outside“, wird die sogenannte Markerbox außerhalb der Hauptblock-Box des Listenelements erzeugt. Ist der Wert „inside“, wird die Markerbox als erste Inlinebox innerhalb der Hauptblock-Box erzeugt. Anschließend folgt der Inhalt des Listenelements. Die CSS 2.1 Spezifikation legt nicht genau fest, wo die Markerbox sonst platziert werden sollte.

Es ist wichtig zu erwähnen, dass die folgenden Eigenschaften nur für die Hauptblock-Box der Listenelemente gelten:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Die Box für das Listenanführungszeichen (bei list-style-position: outside) ist immer transparent.

Block-Boxen formatieren („block formatting context“)

Es klingt vielleicht etwas bedrohlich. Es geht um das Layout der Block-Boxen. Hauptblock-Boxen – und Floats; absolut positionierte Elemente; Inline Blocks (werden im nächsten Artikel erklärt); Tabellenzellen und Elemente deren Overflow-Wert was anderes ist als „visible“. Alle führen zu einem neuen Formatierungskontext.

Was bedeutet das? In einem solchen Zusammenhang werden Block-Boxen vertikal ausgelegt, eine nach der anderen, von oben nach unten. In obigem Beispiel wurde die erste anonyme Block-Box als erstes ausgelegt. Danach der Block mit dem Textabsatz, gefolgt von der zweiten anonymen Block-Box. So einfach ist das.

Die linke Kante jeder Block-Box berührt die linke Kante der Hauptblock-Box (wenn von links nach rechts gelesen wird). Es ist darauf zu achten, dass dies auch dann gilt, wenn ein „gefloatetes“ Element im Weg ist. In diesem Fall werden die Inline-Boxen (nächster Artikel) so gekürzt, dass sie Platz für den Float machen, wie es im Artikel Float Layouts erklärt wird. Erzeugt die Box einen neuen Block zur Formatierung, kann diese trotzdem schmaler werden, wenn ein „gefloatetes“ Element im Weg ist.

Zusammenbrechende Abstände („collapsing margins“)

Der vertikale Abstand zweier „Geschwisterboxen“ in einem Block-Kontext wird über die Eigenschaften „margin-top“ und „margin-bottom“ bestimmt (Geschwisterboxen sind untergeordnete Boxen eines Eltern-Elements bzw. einer Hauptblock-Box). Der vertikale Abstand zweier aneinander angrenzender Block-Boxen kann „zusammenbrechen“ bzw. kollabieren, was bedeutet dass sie unter bestimmten Umständen eine gemeinsame Grenze besitzen. Auch die Grenze eines Nachkommenden Elements kann mit der des Eltern-Elements zusammenfließen. Zwei Boxen können aneinander grenzen, auch wenn sie in keiner Geschwisterbeziehung oder Eltern-Kind-Beziehung stehen.

Es ist auch darauf zu achten, dass in CSS 2.1 nur vertikale Abstände (im normalen Dokumentfluss) zusammenbrechen (für gefloatete oder absolut positionierte Elemente gibt es keine zusammenfallenden Abstände).

<h3 style="margin-bottom:20px">Heading</h3>
<p style="margin-top:10px">Text.</p>

Hier hat die Überschrift einen unteren Abstand von 20 Pixel und der Textabsatz einen oberen Abstand von 10 Pixel. Der Abstand zwischen Überschrift und Textabsatz beträgt nicht 30, sondern 20 Pixel. Warum? Die Abstände fallen zusammen.

Im einfachsten und gebräuchlichsten Fall mit zwei positiven Abständen, ist das Ergebnis ganz einfach der größte beider Abstände. (Zwei) Negative Abstände folgen dem gleichen Prinzip, ohne jetzt weiter in mathematische Details zu gehen.

Als weiteres Beispiel nehmen wir an, der Textabsatz im obigen Beispiel hätte einen negativen Abstand von 10 Pixel. Der zusammengefasste Abstand würde dann 20-10 = 10 Pixel betragen.

Abstände fallen nur zusammen, wenn sie direkt miteinander in Kontakt stehen. Gibt es ein Padding (Polster) oder eine Linie, fallen sie nicht zusammen.

Block-Box Dimensionen

Die Größe einer Block-Box ist von einer Reihe von Dingen abhängig. Ältere Versionen des Internet Explorer wenden diese Regeln falsch an, wodurch es zu einigen Problemen kommen kann. Modernere Browser gleichen diese Fehler durch den sogenannten „Quirks-Modus“ aus, der von der Deklaration des Dokumenttyps am Anfang des Dokuments kontrolliert wird. Als Beispiel kann man sich den Artikel Mozilla’s DOCTYPE sniffing ansehen, der zeigt, wie Mozilla Browser entscheiden, welchen Regeln sie folgen. Andere Browser folgen ähnlichen Algorithmen.

Die CSS 2.1 Spezifikation besagt, dass die Breite (Höhe) einer Block-Box die Summe aus Breite (Höhe) des Inhaltsbereichs und der Breite (Höhe) ihrer horizontalen (vertikalen) Polster (padding) und Grenzen (Linien) ist. Abstände (margin) liegen außerhalb und bleiben deshalb unberücksichtigt bei Eigenschaften wie z.B. der Hintergrundfarbe (background-color).

Wir betrachten uns ein Element mit den folgenden CSS-Regeln:

div#foo {
  width:200px;
  height:100px;
  padding:20px;
  border:10px solid #000;
}

Die Breite der erzeugten Block-Box beträgt 200 + 20 + 20 + 10 + 10 = 260 Pixel, während die Höhe 100 + 20 + 20 + 10 + 10 = 160 Pixel ist. Es ist darauf zu achten, dass beide, die linken und rechten (und oberen und unteren) Werte für Polster (padding) und Linien berücksichtigt werden müssen.

Polster und die Breite der Linien werden somit zur Größe des Inhaltsereichs hinzuaddiert. Microsoft hat dies für ältere Versionen des Internet Explorer falsch interpretiert, indem sie die spezifizierten Breiten- und Höhenwerte als äußere Dimensionen der Block-Box angenommen haben und Polster (padding) sowie Linienbreiten abgezogen haben, um die Größe des Inhaltsbereichs zu berechnen. Wie bereits erwähnt, verhalten sich so auch moderne Browser im „Quirks-Modus“.

Die Regeln für Breite, Höhe und Abstände für verschiedene Typen von Elementen werden in der CSS 2.1 Spezifikation erklärt (Visual formatting model details). Diese ist nicht ganz einfach zu verstehen, leider ist es aber notwendig sie zu kennen, will man sich professionell mit Webdesign beschäftigen.

Die Tatsache, das dies nicht ganz einfach ist, zeigen auch die verschiedenen Interpretationsweisen der verschiedenen Browser. Speziell bei absolut positionierten Elementen.

Der letzte Teil dieser Serie beschäftigt sich damit, wie die Inline-Boxen funktionieren.

Teil 3: Inline-Boxen

Das ist der dritte und letzte Teil dieser Serie über Block und Inline. Im ersten Teil haben wir diese Konzepte in HTML und CSS verglichen. Im zweiten Teil haben wir uns angesehen, wie das mit den Block-Boxen in CSS funktioniert.

Folglich ist dieser letzte Teil den Details der Inline-Boxen gewidmet.

Inline-Boxen

Folgende Werte für die Display-Eigenschaft erzeugen Inline-Boxen:

• inline (Standardwert)
• inline-table (wird hier nicht behandelt)
• run-in (manchmal)

Der Wert „inline-block“ erzeugt eine Block-Box, wird aber ausgelegt wie eine Inline-Box. Deshalb werden wir uns das zu einem späteren Zeitpunkt ansehen.

Der Wert „run-in“ kann entweder eine Block-Box oder eine Inline-Box erzeugen. Das hängt davon ab, was für ein Typ Box darauf folgt. Auch das etwas später in diesem Artikel.

Anonyme Inline-Boxen

Wie wir bereits im zweiten Teil sehen konnten, werden unter bestimmten Umständen anonyme Block-Boxen erzeugt. Auf ähnliche Art und Weise werden manchmal anonyme Inline-Boxen erzeugt. Ein einfaches Beispiel:

<p>Ein Satz mit einem <em>hervorgehobenen</em> Wort.< /p>

Da EM ein Inline-Level Element ist, erzeugt „<em>“ eine Inline-Box. Der Quelltext in diesem Beispiel wird auch noch zwei zusätzliche anonyme Inline-Boxen erzeugen. Eine für den Text vor dem <em> und eine danach.

Inline-Blocks

Hat display den Wert „inline-block“, wird eine Block-Box erzeugt, die allerdings mehr wie eine Inline-Box behandelt wird. Die Box wird so formatiert, als wäre sie durch ein sogenanntes ersetzendes Inline-Element (replaced inline element) erzeugt worden. Der Inhalt wird aber wie eine Block-Box formatiert (s. Teil 2).

Die CSS-Unterstützung für inline-block scheint sehr begrenzt. Auf den getesteten Browsern wurde dieser Wert nur vom Opera 7 unterstützt. Zusatz: Nach den Kommenatren bei Tommy Olsson funktioniert inline-block auch mit dem Safari 1.2x.

Run-in-Boxen

Abhängig vom Typ Box der auf die Run-in-Box folgt, wird diese zu einer Block-Box oder einer Inline-Box.

Folgt eine normale (nicht gefloatete oder absolut positionierte) Block-Box, wird die Run-in-Box zu einer Inline-Box und wird zur ersten Inline-Box in der folgenden Block-Box.

Folgt auf die Run-in-Box ein anderer Typ Box – weitere Run-in-Boxen mit eingeschlossen – dann wird sie zu einer Block-Box.

Run-in könnte dafür eingesetzt werden, um eine Überschrift in den folgenden Textabsatz laufen zu lassen. Zum Beispiel:

<h2 style="display:run-in">Überschrift.</h2>
<p>Ein mit der Überschrift verbundener Textabsatz.</p>

Das würde dann in etwa so aussehen:

Überschrift. Ein mit der Überschrift verbundener Textabsatz.

Auch hier funktioniert das ganze bisher nur mit Opera 7.

Inline-Boxen formatieren

So wie Block-Boxen am sogenannten „Block formatting context“ teilnehmen, nehmen Inline-Boxen am „Inline formatting context“ teil.

Das bedeutet, dass die Boxen horizontal ausgelegt werden, eine nach der anderen, beginnend oben in der Block-Box die sie enthält. Die Boxen können Linien (border) und Polster (padding), genauso wie horizontale Abstände (margin) haben. Vertikale Abstände werden jedoch ignoriert, wie auch andere Eigenschaften wie z.B.:

• Breite und Höhe (width und height)
• max-width und max-height
• min-width und min-height

Der Internet Explorer wendet fälschlicherweise einige dieser Eigenschaften für Inline-Boxen an.

Line-Boxen (Zeilen-Boxen) und Ausrichtung

Inline-Boxen oder Boxen, die eine Zeile Text erzeugen (oder ähnliches), werden in eine fiktive Box (Line-Box) eingeschlossen. Haben die Boxen in der Line-Box nicht die gleichen Höhen, können sie vertikal auf verschiedene Art justiert werden. Eine Line-Box ist immer groß genug, um alle ihre Inline-Boxen zu enthalten. Je nachdem wie die Boxen vertikal ausgerichtet werden, kann die Line-Box größer sein als ihre größte Inline-Box.

Die vertikale Ausrichtung einer Inline-Box, die nicht größer ist als ihre sie umschließende Line-Box, kann durch die Eigenschaft „vertical-align“ kontrolliert werden. Es gibt eine Reihe gültiger Werte für diese Eigenschaft. Auch Prozentsätze und numerische Spezifikationen. Um zu verhindern, dass dieser Artikel länger wird, als er ohnehin schon ist, wird hier auf die CSS 2.1 Spezifikatione verwiesen (Beschreibung von vertical-align).

Die linke Kante einer Line-Box berührt normalerweise die linke Kante der Block-Box die sie umschließt. Die rechten Kanten umgekehrt genauso. Sind jedoch ein oder mehrere „gefloatete“ Elemente im Weg, wird die betroffene Line-Box schmaler, um Platz zu machen. Nicht die Block-Box wird schmaler, sondern die darin befindlichen Line-Box(en).

Passen alle Inline-Boxen in einem Formatierungs-Kontext nicht in eine Line-Box, werden sie über verschiedene Line-Boxen verteilt. Line-Boxen werden vertikal ausgelegt und ohne Zwischenraum gestapelt.

Passt eine einzelne Inline-Box nicht in eine Line-Box, wird sie in mehrere Boxen aufgeteilt, über so viele Zeilen wie benötigt. Erfolgt eine solche Aufteilung, werden Grenzen (border), Polster (padding) und Abstände (margin) ignoriert.

Manchmal kann eine Inline-Box nicht aufgeteilt werden, was dazu führt, dass sie aus der Line-Box „heraus läuft“. Hat die Block-Box einen anderen Wert als „visible“ für ihre Overflow-Eigenschaft (Überlauf-Eigenschaft), kann der Überfluss entweder unter Kontrolle gebracht werden oder es werden Scroll-Balken erzeugt.

Schließlich ist es denkbar, dass eine Inline-Box in mehrere Boxen innerhalb einer einzigen Line-Box aufgeteilt wird, auf Grund eines bi-direktionalen Textes. Damit haben wir leider keine Erfahrung und bitten die Leser höflich, sich an die CSS 2.1 Spezifikation zu wenden (Bi-directional text processing).

Ist die Gesamtbreite der Inline-Boxen kleiner als die Breite der Line-Box, die sie umschließt, wird die horizontale Ausrichtung durch die Eigenschaft „text-align“ kontrolliert.

Es ist darauf zu achten, dass die vertikale Ausrichtung für die einzelnen Inline-Boxen spezifiziert wird, während „text-align“ für die umschließende Block-Box gilt (obwohl auch hier der Internet Explorer fälschlicherweise den Wert für „text-align“ auf Block-Boxen anwendet).

Beispiel für die Formatierung einer Inline-Box

Wir beginnen mit dem folgenden Quelltext:

<p>Manchmal wird eine <dfn>anonyme Block-Box</dfn> erzeugt.</p>

Das <p>-Element im Beispiel erzeugt eine Block-Box, die drei Inline-Boxen enthält:

• anonym: „Manchmal wird eine“
• DFN: „anonyme Block-Box“
• anonym: „erzeugt“

Die Block-Box des <p>-Elements stellt den enthaltenden Block für die Line-Box oder mehrere Line-Boxen dar, die erzeugt werden, wenn die Inline-Boxen ausgelegt werden. Ist die Block-Box breit genug, wird nur eine Line-Box erzeugt. Das sieht dann folgendermaßen aus:

Manchmal wird eine anonyme Block-Box erzeugt.

Ist die Block-Box nicht breit genug, werden die Inline-Boxen über mehrere Line-Boxen verteilt. So z.B.:

Manchmal wird eine
anonyme Block-Box
erzeugt

oder so:

Manchmal wird eine anonyme
Block-Box erzeugt

Im letzten Fall wird die Box des <dfn>-Elements in zwei getrennte Inline-Boxen getrennt. Wir nennen sie mal D1 und D2. Jetzt nehmen wir an, wir hätten die folgenden CSS-Regeln für das <dfn>-Element:

dfn {
  margin:1em;
  padding:0.2em;
  border:1px solid #f00;
}

Dort wo die <dfn>-Box gesplittet wird, werden Linien (border), Polster (padding) und Abstände (margin) ignoriert. Obere Abstände (margin-top) und untere Abstände (margin-bottom) werden auch irgendwie ignoriert. Aber die seitlichen Abstände (margin-left vor D1) und (margin-right nach D2) werden eingefügt. Polster (padding) und Linien (border) werden über und unter D1 und D2 berücksichtigt, genauso wie vor D1 und nach D2.

Schlussbemerkungen

Die vertikale Ausrichtung von Inline-Boxen innerhalb einer Line-Box selbst, gibt genug Stoff her für eine eigene Serie von Artikeln. Ohne zu sehr ins Detail zu gehen, wollen wir einen Fall beleuchten, der CSS-Neulingen einiges an Kopfzerbechen bereiten kann.

Es geht um Tabellenzellen, die nur ein Bild beinhalten. Dieses Konstrukt wirkte vertrauter, als noch Layout-Tabellen und <img>-Elemente für Dinge eingesetzt wurden, die wir heute besser mit CSS und Hintergrundbildern lösen.

 <td> <img src="x.gif" alt="…"> </td>

Benutzen wir einen strikten Dokumenttyp und deklarieren dies so, dass der Browser im standardkonformen Modus arbeitet, werden wird unterhalb des Bildes (<img>) eine Lücke erhalten. Warum? Weil der Standardwert für „vertical-align“ baseline ist.

In der Tabellenzelle wird eine Line-Box erzeugt. Diese Line-Box enthält eine einzige Inline-Box: das Bild. Diese Inline-Box ist vertikal so ausgerichtet, als hätten wir Text in der Tabellenzelle. Die Baseline ist hat normalerweise etwas Abstand zum unteren Rand der Inline-Box, um Platz für die Unterlängen des Textes wie z.B. beim „g“ oder „p“ freizuhalten. Der untere Rand der Bildbox berührt also diese Baseline. Die Lücke die wir sehen ist jene, die sich zwischen Baseline und dem unteren Rand der Line-Box befindet.

Es gibt verschiedene Lösungen für dieses Problem:

• „vertical-align: bottom“ für das <img>-Element
• „display: block“ für das <img>-Element
• „line-height: 0“ für die Tabellenzelle (td)

Im ersten Fall ändern wir die vertikale Ausrichtung für die image-Box so, dass sie den unteren Rand der Line-Box berührt. Im zweiten Fall sorgen wir dafür, dass das <img>-Element einen Block anstatt einer Inline-Box erzeugt, um das Problem der vertikalen Ausrichtung auszugleichen. Im dritten Fall wird die Entfernung zwischen Baseline und unterem Rand der Line-Box 0, da wir keinen Raum für Text zuteilen.

Dieses Beispiel beschließt die Serie über Vierecke. Obwohl wir nicht alles betrachtet haben, hoffen wir, die wichtigsten Eigenschaften der verschiedenen Boxentypen beleuchtet zu haben.