CSS-Quiz: Visuelle Formatierung – Teil 1

Die drei Positionierungsschemata

CSS 2.1 kennt drei Schemata, nach denen eine Box ihren Platz findet: den normalen Fluss, das Umfließen und die absolute Positionierung. Der normale Fluss umfasst dabei die Anordnung von Blöcken untereinander, von Inline-Elementen in Zeilen und die relative Verschiebung, die ein Element nur optisch bewegt und seinen Platz im Fluss behalten lässt.

Welches Schema gilt, bestimmen drei Eigenschaften in einer festen Reihenfolge: Zuerst wird die Positionierung geprüft – ist sie absolut oder fest, wird das Umfließen wirkungslos und die Anzeigeart in ihre Block-Entsprechung überführt. Andernfalls wird das Umfließen geprüft, mit derselben Folge für die Anzeigeart. Trifft keines von beiden zu, wird die Anzeigeart so übernommen, wie sie notiert ist.

Merken lässt sich das in einem Satz: Sobald ein Element umflossen oder absolut positioniert ist, ist es ein Block – eine daneben notierte Anzeigeart ändert daran nichts und kann entfallen. Der Grundlagenartikel zum Zusammenhang zwischen display, position und float geht die Umrechnungstabelle im Einzelnen durch.

Der umschließende Block

Fast jede Maß- und Kantenangabe misst an einem umschließenden Block, und welcher das ist, hängt vom Positionierungsschema ab. Für ein Element im normalen Fluss ist es der nächste Block-Vorfahr, und zwar dessen Inhaltskante. Für ein relativ verschobenes Element ändert sich daran nichts – die Verschiebung misst an der eigenen ursprünglichen Lage.

Für ein absolut positioniertes Element ist es der nächste Vorfahr, der selbst positioniert ist, gemessen an dessen Innenkante des Rahmens – also um Inhalt und Innenabstand herum. Findet sich kein solcher Vorfahr, ist es der ursprüngliche umschließende Block, praktisch die Fläche des Dokuments. Für ein am Fenster verankertes Element ist es der Anzeigebereich selbst.

Daran hängen die Prozentwerte: Breite, Innenabstände und Abstände messen an der Breite dieses Blocks, die Höhe an seiner Höhe – und wenn er keine bestimmte Höhe hat, wird eine prozentuale Höhe zu auto. Für die Mindest- und Höchsthöhe gilt dasselbe. Eine Höhenangabe in Prozent trägt also nur, wenn jede Ebene darüber bis hinauf zu einem Element mit fester Höhe ebenfalls eine hat.

Warum width auf Inline-Elementen nichts tut

Eine nicht ersetzte Inline-Box nimmt Breite und Höhe nicht an. Der Grund ist, dass sie über mehrere Zeilen gebrochen sein kann – eine Betonung mitten im Satz kann am Zeilenende beginnen und in der nächsten Zeile enden, und für ein solches Gebilde gibt es keine sinnvolle einzelne Breite.

Senkrechte Innenabstände und Rahmen werden an einer Inline-Box zwar gezeichnet, verschieben aber die Zeilen darüber und darunter nicht: Die Höhe der Zeilenbox richtet sich nach der Zeilenhöhe, nicht nach der Polsterung. Deshalb überlappt ein Inline-Element mit großem senkrechten Innenabstand seine Nachbarzeilen.

Ersetzte Elemente sind ausgenommen – ein Bild bringt eigene Maße mit und nimmt Angaben an, auch als Inline-Element. Wer für ein nicht ersetztes Element Maße braucht, wechselt die Anzeigeart: Der Inline-Block steht weiter im Textfluss, verhält sich innen aber wie ein Block und nimmt alle Angaben an.

Was die Anzeigeart alles bestimmt

Die Eigenschaft, die den Typ einer Box festlegt, ist die folgenreichste in diesem Kapitel. Sie entscheidet, ob ein Element eine neue Zeile beginnt, ob es Maßangaben annimmt, wie seine Abstände wirken, welchen Formatierungskontext es für seine Kinder eröffnet und ob es überhaupt eine Box erzeugt.

CSS 2.1 kennt dafür siebzehn Werte, von denen zehn Tabellenrollen betreffen. Im Alltag sind es vier: Block, Inline, Inline-Block und der Wert, der gar keine Box erzeugt. Der Inline-Block verbindet dabei beides – er steht im Textfluss und verhält sich innen wie ein Block.

Heute wird die Anzeigeart als Paar aus einem äußeren und einem inneren Wert verstanden: Der äußere sagt, wie sich die Box gegenüber ihren Geschwistern verhält, der innere, welcher Kontext für ihre Kinder gilt. In dieser Lesart ist ein Flex-Container ein Block nach außen und ein Flex-Kontext nach innen – und die alten Werte sind Kurzformen für dieselben Paare. Das erklärt auch, warum ein umflossenes Element immer ein Block wird: Die Umrechnung betrifft nur den äußeren Wert.

Wer den Zusammenhang zwischen den drei Schemata einmal in Bewegung sehen will, findet im Fluss-Visualizer sechs Elemente, an denen sich Anzeigeart, Umfließen und Räumung einzeln umschalten lassen – die Anordnung ordnet sich dabei nach genau den Regeln neu, die diese Runde abfragt.