Markup Webdesign Journal

(Aus dem englischen Original ins Deutsche übersetzt)

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:

1. “vertical-align: bottom” für das <img>-Element
2. “display: block” für das <img>-Element
3. “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.