vertical-align vs line-height: vertikale Ausrichtung in der Zeile

line-height: die Höhe der Zeile

line-height setzt die Höhe jeder Zeilenbox. Der Unterschied zur Schriftgröße wird als Halbdurchschuss gleichmäßig über und unter die Schrift verteilt – deshalb steht eine einzelne Textzeile in einer Box mit line-height: 3em vertikal in der Mitte. Ein einheitenloser Wert (1.5) ist ein Faktor, der mit der Schriftgröße jedes Kindes neu multipliziert wird; ein Wert in em oder Prozent wird einmal berechnet und dann als feste Länge vererbt. Das Zeilenbox-Modell erklärt die Konstruktion.

vertical-align: die Lage in der Zeile

vertical-align gilt nur für Inline-Boxen und Tabellenzellen. baseline (Ausgangswert) setzt die Grundlinie der Box auf die der Zeile; middle ihre Mitte auf die Mitte der Kleinbuchstaben; top und bottom an die Zeilenbox; text-top und text-bottom an die Schrift; sub und super versetzen. Eine Länge oder Prozent verschiebt von der Grundlinie aus.

Die Lücke unter dem Bild

Ein Inline-Bild steht auf der Grundlinie; unter ihm bleibt der Platz für Unterlängen frei – die bekannte Lücke von wenigen Pixeln unter einem Bild in einem Block. vertical-align: middle oder bottom entfernt sie, ebenso display: block am Bild. line-height auf dem Container verändert die Lücke, entfernt sie aber nicht.

Die Zahl ohne Einheit

Bei der Zeilenhöhe gibt es einen Unterschied, der in keiner anderen Eigenschaft so vorkommt: Eine Zahl ohne Einheit wird anders vererbt als eine Länge oder ein Prozentwert. line-height: 1.5 vererbt den Faktor, sodass jedes Kind seine eigene Schriftgröße mit 1,5 multipliziert. line-height: 150% und line-height: 24px vererben dagegen das ausgerechnete Ergebnis – ein Kind mit größerer Schrift bekommt dieselben 24 Pixel Zeilenabstand wie das Elternelement.

Sichtbar wird das erst dort, wo Schriftgrößen sich unterscheiden: in einer Überschrift, in einem hochgestellten Zeichen, in einem Kasten mit kleinerer Schrift. Der Text überlappt dann oder steht unnötig weit auseinander, und die Ursache steht ganz oben im Stylesheet, nicht an der betroffenen Stelle. Die Empfehlung ist deshalb eindeutig: Eine Zeilenhöhe, die vererbt werden soll, wird als Zahl ohne Einheit notiert. Eine Länge ist nur dort richtig, wo genau dieses Element gemeint ist und kein Kind sie erben soll.

Derselbe Name in Tabellenzellen

vertical-align hat zwei verschiedene Bedeutungen, je nachdem, worauf es angewendet wird. An einem Inline-Element bestimmt es die Lage in der Zeilenbox, wie oben beschrieben. An einer Tabellenzelle bestimmt es dagegen, wo der Inhalt innerhalb der Zelle sitzt – oben, mittig, unten oder an der Grundlinie der Nachbarzellen ausgerichtet. Die Werte für hochgestellt und tiefergestellt sowie alle Längenangaben haben dort keine Wirkung.

Diese zweite Bedeutung ist die einzige einfache Art, einen Inhalt senkrecht zu zentrieren, die CSS 2.1 kennt – und genau deshalb wurden über Jahre Layouts als Tabellen gebaut oder Elemente mit display: table-cell zu Zellen gemacht. Wer heute senkrecht zentrieren will, nimmt Flexbox oder Grid und braucht die Eigenschaft dafür nicht mehr. In echten Datentabellen bleibt sie unverzichtbar: Zellen mit unterschiedlich langem Inhalt liest man deutlich leichter, wenn ihr Text oben beginnt statt in der Mitte zu schweben.

Halbe Zeilenabstände und der leere Raum

Die Differenz zwischen Zeilenhöhe und Schriftgröße verteilt der Browser gleichmäßig auf beide Seiten des Textes – oben und unten je die Hälfte. Diese beiden Hälften gehören zur Inline-Box und lassen sich weder abschalten noch getrennt ansprechen. Deshalb sitzt Text in einem Kasten mit großzügiger Zeilenhöhe scheinbar zu tief, obwohl der Innenabstand oben und unten gleich ist: Die untere Hälfte des Zeilenabstands zählt mit, die obere ebenfalls, und beide sind unsichtbar.

Bei einer einzeiligen Beschriftung in einem Knopf ist das der Grund für ein Ergebnis, das um wenige Pixel danebenliegt. Die einfachste Abhilfe ist eine Zeilenhöhe von eins an genau dieser Stelle und ein Innenabstand, der den Abstand übernimmt. Bei mehrzeiligem Text ist dagegen genau das Gegenteil richtig, weil die Zeilen sonst aneinanderkleben. Eine spätere Eigenschaft erlaubt es, den Abstand über und unter dem Textblock auf die tatsächlichen Buchstabenkanten zu beziehen und diese Hälften damit herauszurechnen.

Was keines von beiden kann

Ein Block-Element in seinem Container vertikal zentrieren: vertical-align wirkt auf Blöcke nicht, line-height nur auf einzeilige Inline-Inhalte. Dafür gibt es display: table-cell aus CSS 2.1 oder Flexbox und Grid.

Häufige Fragen