Zeilenhöhe und Inline-Elemente: Ein tieferer Einblick

Das Verständnis des Verhaltens der Zeilenhöhe in Inline-Elementen kann rätselhaft sein. Trotz gründlicher Recherche bleiben einige Schlüsselaspekte unklar. Dieser Leitfaden geht tiefer in das Thema ein, um die folgenden Fragen zu beantworten:

1. Inkonsistenz zwischen Schriftgröße und gemessener Höhe:

Ein Inline-Element mit einer Schriftgröße von 15 Pixel zeigt in Browser-Entwicklertools eine Höhe von 18 Pixel an. Dies liegt daran, dass:

• Höhe der Inline-Box: Die Eigenschaft „line-height“ bestimmt die Höhe der Inline-Box, die alle Glyphen und ihren halben Zeilenabstand auf jeder Seite umschließt. In diesem Fall beträgt die Boxhöhe 15 Pixel.
• Höhe des Inhaltsbereichs: Die Entwicklertools melden die Höhe des Inhaltsbereichs, die aufgrund unterschiedlicher Glyphengrößen normalerweise die Zeilenhöhe überschreitet innerhalb einer Schriftart.

2. Hintergrundfarbe stimmt nicht mit der Zeilenhöhe überein:

Die Hintergrundfarbe des Inline-Elements stimmt nicht mit der Zeilenhöhe überein, weil:

• Linienfeldhöhe: Neben Inline-Boxen gibt es auch Line-Boxen. Die Höhe einer Zeilenbox wird durch die Zeilenhöhe bestimmt und umfasst nur die Inline-Boxen mit derselben Zeilenhöhe und vertikalen Ausrichtung. In diesem Beispiel beträgt die Höhe des Zeilenfelds ebenfalls 15 Pixel.
• Höhe des Inhaltsbereichs: Die Hintergrundfarbe wird auf den Inhaltsbereich angewendet, was der Höhe des höchsten verwendeten Glyphen entspricht Schriftart und -größe. Dieser Wert kann je nach Schriftart variieren und steht nicht in direktem Zusammenhang mit der Zeilenhöhe.

Hinweis: Die CSS-Spezifikation definiert den Algorithmus zur Berechnung des Inhaltsbereichs nicht explizit Höhe, überlassen Sie es der Interpretation von Benutzerprogrammen.