Zeilenhöhe und Ausrichtung

Jede Größenklasse setzt eine Zeilenhöhe, aber mit den Klassen leading- kannst du eine andere wählen. Der Name stammt aus dem Druck: Setzer legten früher dünne Bleistreifen zwischen die Zeilen aus Metallbuchstaben, um sie auseinanderzurücken (englisch lead).

Die Werte sind Zahlen ohne Einheit, also Vielfache der Schriftgröße, genau wie das line-height: 1.6, das du im CSS-Kurs geschrieben hast. Mit text-lg (18 px) und leading-relaxed ist jede Zeile 18 × 1,625 = 29,25 Pixel hoch. Eine Klasse leading- gewinnt immer gegen die Zeilenhöhe einer Größenklasse, du kannst sie also in beliebiger Reihenfolge schreiben.

Absätze mit längerem Text lassen sich mit mehr Abstand zwischen den Zeilen leichter lesen, zum Beispiel mit leading-relaxed. Bei großen Überschriften passt die Zeilenhöhe, die zur Größe gehört, meist genau.

Die Textausrichtung funktioniert wie im CSS-Kurs: text-left, text-center, text-right und text-justify setzen text-align auf left, center, right und justify. Und weil text-align vererbt wird, zentriert eine Klasse am Element header den Namen, das Alter und das Badge darin.