Websiteentwicklung: CSS: Zeilenhöhe
Mit der Eigenschaft line-height kann die Zeilenhöhe beeinflußt werden.
Der Wert ist eine nicht negative Zahl, eine nicht negative Länge, ein nicht negativer Prozentwert oder eines der Schlüsselwörter
'normal' oder 'inherit'.
Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Wird die Eigenschaft auf Block-Boxen angewendet, welche inzeiligen Inhalt enthalten, so bestimmt die Eigenschaft die minimale Zeilenhöhe des inzeiligen Inhaltes. Bei Anwendung auf inzeilige Elemente bestimmt die Eigenschaft die Zeilenhöhe.
Beim Wert 'normal' wird die Höhe automatisch bestimmt, wobei das Ergebnis von der verwendeten Schriftart abhängt. Auch hoch- oder tiefgestellte Schrift oder ersetzte Elemente wie Bilder können die Zeilenhöhe beeinflussen. Typographisch sollte der Wert auf optimale Lesbarkeit abgestimmt sein, erfahrungsgemäß liegt dann der Wert im Bereich von 1.2 bis 1.5 Geviertgrößen (in der CSS-Empfehlung werden 1.0 bis 1.2 erwähnt, bei 1.0 ist die Lesbarkeit aber bereits deutlich vermindert). Wenn keine besonderen Umstände vorliegen, ist es also ratsam, sich auf den mit 'normal' automatisch bestimmten Wert zu verlassen, die Eigenschaft also zu vermeiden, jedenfalls nicht kleiner als eine Geviertgröße anzugeben. Dabei ist auch zu beachten, dass bei der Einstellung 'normal' auch berücksichtigt wird, dass mehrere, verschieden große Schriftarten in einer Zeile auftreten können, die Zeilenhöhe wird dann immer so angepaßt, dass kein Überlapp mit der Zeile darüber stattfindet. Bei der Einstellung einer festen Zeilenhöhe kann ein Überlapp hingegen schnell geschehen, insbesondere für Werte unter einer Geviertgröße.
Wird eine Zahl angegeben, so ist dies eine Kurzfassung einer Angabe einer Länge mit der Einheit em. Bei der Angabe eines Prozentwertes bezieht sich dieser auf die aktuelle Geviertgröße, also 1em.
Problematisches Beispiel mit einer angegebenen Zeilenhöhe weniger als 1em:
p {
line-height: 0.5em
}
Die Zeilenhöhe entspricht 0.5em.
Achtung: Wenn die Schriftgröße größer ist als die Zeilenhöhe, wie hier zu sehen ist, können sich die Zeilen überschneiden.
Solche Probleme können auch versehentlich auftreten, wenn ein Autor für die Eigenschaft ungeeignete Einheiten wie px, pc oder pt etc verwendet und die vom Leser bevorzugte oder minimale Schriftgröße größer ist als die vom Autor angenommene, der Text kann so unlesbar werden, daher ist die Eigenschaft nur mit Vorsicht zu verwenden.
Weiteres Beispiel:
p {
line-height: 2em
}
Bei diesem Beispiel ist die Zeilenhöhe
doppelt so hoch wie die Schriftgröße. Das ist für ein flüssiges Lesen bereits zuviel.
Da bei Blockelementen damit auch nur die minimale Zeilenhöhe angegeben wird, können sich immer noch andere Zeilenhöhen ergeben,
wenn in einigen Zeilen etwa Zeichen hoch- oder tiefgestellt sind:
H2O ist die chemische Formel für Wasser
X 2Σ1/2 ist der Grundzustand Doublett Σ 1/2 eines Moleküls
E = m c2 ist eine Formel für die Beziehung zwischen Energie und Masse und Lichtgeschwindigkeit