CSS line-height-Eigenschaft
Die line-height-Eigenschaft gibt die Höhe einer Zeilenbox an und steuert den vertikalen Abstand zwischen Textzeilen. Sie verhält sich je nach Elementtyp unterschiedlich:
- Bei Block-Elementen gibt die line-height-Eigenschaft die minimale Zeilenhöhe der Zeilenboxen im Element an.
- Bei nicht ersetzten Inline-Elementen gibt die line-height-Eigenschaft die Höhe an, die bei der Berechnung der Zeilenbox-Höhe verwendet wird.
- Bei ersetzten Inline-Elementen wie Buttons oder anderen Eingabeelementen hat die line-height-Eigenschaft in der Regel keinen Einfluss auf die Berechnung der Zeilenbox-Höhe.
INFO
Negative Werte sind gültig.
INFO
Die Standard-Zeilenhöhe beträgt in den meisten Browsern etwa 110 % bis 120 %.
Die line-height-Eigenschaft legt das Leading (Zeilenabstand) eines Textes fest. Wenn der line-height-Wert größer ist als der Schriftgröße-Wert eines Elements, entspricht die Differenz dem Text-Leading.
| Anfangswert | normal |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Ja. Die Höhe der Zeilen ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.lineHeight = "40px"; |
Syntax
Syntax der CSS line-height-Eigenschaft
line-height: normal | number | length | percentage | calc | initial | inherit;Beispiel mit dem Wert normal:
Beispiel der CSS line-height-Eigenschaft mit dem Wert normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: normal (default)</h3>
<div>This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Ergebnis
Beispiel mit dem Wert length:
Beispiel der CSS line-height-Eigenschaft mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 10px;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 10px</h3>
<div>This is a paragraph with a specified line-height.
<br /> The line height here is set to 10 pixels.
</div>
</body>
</html>Beispiel mit dem Wert percentage:
Beispiel der CSS line-height-Eigenschaft mit %(Prozent)-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 200%;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h2>line-height: 200%</h2>
<div>This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
</body>
</html>Beispiel mit mehreren Werten:
Beispiel der CSS line-height-Eigenschaft mit cm, px, %(Prozent), normal und number-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.a {
line-height: 1;
}
div.b {
line-height: 50px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
div.e {
line-height: 200%;
}
div.f {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 1</h3>
<div class="a">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1.
</div>
<h3>line-height: 50px</h3>
<div class="b">This is a paragraph with a specified line-height.
<br /> The line height here is set to 50 pixels.
</div>
<h3>line-height: 0.5cm</h3>
<div class="c">This is a paragraph with a specified line-height.
<br /> The line height here is set to 0.5 centimeter.
</div>
<h3>line-height: 1cm</h3>
<div class="d">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1 centimeter.
</div>
<h3>line-height: 200%</h3>
<div class="e">This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
<h3>line-height: normal</h3>
<div class="f">This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Verwendung der line-height-Eigenschaft für verschiedene Zwecke
Die line-height-Eigenschaft kann verwendet werden, um interessante visuelle Stile zu erstellen, indem der vertikale Abstand gesteuert wird. So können Sie sie beispielsweise mit einem linear-gradient() kombinieren, um jeder Textzeile eine andere Farbe zu geben, oder repeating-linear-gradient() verwenden, um Linien zwischen dem Text zu zeichnen. Beachten Sie, dass line-height nur den Abstand steuert, während der Gradient die Farben verwaltet.
Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| normal | Definiert eine normale Zeilenhöhe. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| length | Definiert eine feste Zeilenhöhe in px, cm, em usw. | Ausführen » |
| number | Definiert eine Zahl, die mit der aktuellen Schriftgröße multipliziert wird, um die Zeilenhöhe festzulegen. | Ausführen » |
| % | Definiert eine Zeilenhöhe in Prozent der aktuellen Schriftgröße. | Ausführen » |
| calc | Definiert eine Zeilenhöhe unter Verwendung einer Berechnung. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Hinweis: Die Verwendung der em-Einheit wird für skalierbare Zeilenhöhen allgemein empfohlen.
Praxis
Was bewirkt die 'line-height'-Eigenschaft in CSS?