Inline formatting context

Der Inline-Formatierungskontext ist Teil der visuellen Darstellung einer Webseite. Inline-Boxen werden eine nach der anderen in der Richtung angeordnet, in der Sätze im verwendeten Schreibmodus verlaufen:

• In einem horizontalen Schreibmodus werden Boxen horizontal von links nach rechts angeordnet.
• In einem vertikalen Schreibmodus würden sie vertikal von oben nach unten angeordnet.

Im folgenden Beispiel sind die zwei <div>-Elemente mit den schwarzen Rahmen Teil eines Block-Formatierungskontexts, während innerhalb jeder Box die Wörter in einem Inline-Formatierungskontext teilnehmen. Die Wörter im horizontalen Schreibmodus laufen horizontal, während Wörter im vertikalen Schreibmodus vertikal verlaufen.

Boxen, die eine Linie bilden, werden von einem rechteckigen Bereich namens Zeilenbox enthalten. Diese Box wird groß genug sein, um alle Inline-Boxen in dieser Zeile zu enthalten; wenn in der Inline-Richtung kein Platz mehr ist, wird eine weitere Zeile erstellt. Daher ist ein Absatz eine Reihe von Inline-Zeilenboxen, die in der Blockrichtung gestapelt sind.

Wenn eine Inline-Box geteilt wird, haben Ränder, Rahmen und Abstände dort, wo die Teilung erfolgt, keinen visuellen Effekt. Im nächsten Beispiel gibt es ein <span>-Element, das eine Reihe von Wörtern umschließt, die auf zwei Linien umgebrochen werden. Der Rahmen auf dem <span> bricht an der Umbruchstelle.

Ränder, Rahmen und Abstände in der Inline-Richtung werden berücksichtigt. Im folgenden Beispiel sehen Sie, wie der Rand, der Rahmen und der Abstand auf dem Inline-<span>-Element hinzugefügt werden.

Inline-Boxen können in der Blockrichtung auf verschiedene Weise ausgerichtet werden, indem die vertical-align-Eigenschaft verwendet wird, die in vertikalen Schreibmodi auf der Blockachse ausrichtet (also überhaupt nicht vertikal!). Im folgenden Beispiel macht der große Text die Zeilenbox des ersten Satzes größer, deshalb kann die vertical-align-Eigenschaft verwendet werden, um die Inline-Boxen auf beiden Seiten auszurichten. Ich habe den Wert top verwendet, versuchen Sie ihn in middle, bottom oder baseline zu ändern.

Gibt es zusätzlichen Platz in der Inline-Richtung, kann die text-align-Eigenschaft verwendet werden, um die Inline-Boxen innerhalb ihrer Zeilenbox auszurichten. Versuchen Sie, den Wert von text-align unten auf end zu ändern.

Zeilenboxen haben normalerweise die gleiche Größe in der Inline-Richtung, daher die gleiche Breite, wenn in einem horizontalen Schreibmodus gearbeitet wird, oder Höhe, wenn in einem vertikalen Schreibmodus gearbeitet wird. Wenn sich jedoch ein float im selben Block-Formatierungskontext befindet, führt das Float dazu, dass die Zeilenboxen, die das Float umfließen, kürzer werden.

• Block-Formatierungskontext
• Visuelles Formatierungsmodell