CSS line-height-Eigenschaft

Definition und Verwendung

Die Eigenschaft line-height stellt den Abstand zwischen den Zeilen (Zeilenhöhe) ein.

Anmerkung:Negative Werte sind nicht erlaubt.

Erklärung

Diese Eigenschaft beeinflusst die Layout des Zeilenrahmens. Wenn sie auf ein blockartiges Element angewendet wird, definiert sie den kleinsten Abstand zwischen den Baselines innerhalb des Elements anstatt des größten Abstands.

Der Unterschied zwischen dem berechneten Wert von line-height und font-size (in CSS als 'Zeilenabstand' bezeichnet) wird durch zwei Hälften geteilt und auf die Ober- und Unterseite des Textes einer Zeile addiert. Der kleinste Rahmen, der diese Inhalte enthalten kann, ist der Zeilenrahmen.

Die ursprüngliche Zahlenangabe gibt einen Skalierungsfaktor an, der von den Nachkommenlementen geerbt wird, anstatt den berechneten Wert zu verwenden.

Weitere Informationen:

CSS-Tutorial:CSS Text

HTML DOM Referenzhandbuch:lineHeight-Eigenschaft

Beispiel

Zeilenhöhe in Prozent einstellen:

p.small {line-height:90%}
p.big {line-height:200%}

Versuchen Sie es selbst

（更多信息可以在页面底部查看）

CSS-Syntax

line-height: normal|number|length|initial|inherit;

Eigenschaftswert

Wert Beschreibung
normal Standard. Einen angemessenen Zeilenabstand einstellen.
number Eine Zahl einstellen, die mit der aktuellen Zeichengröße multipliziert wird, um den Zeilenabstand zu setzen.
length Fester Zeilenabstand einstellen.
% Prozentualer Zeilenabstand basierend auf der aktuellen Zeichengröße.
inherit Der Wert der Eigenschaft line-height sollte vom übergeordneten Element geerbt werden.

Technische Details

Standardwert: normal
Vererbbarkeit: ja
Version: CSS1
JavaScript-Syntax: object.style.lineHeight="2"

TIY-Beispiel

Den Zeilenabstand mit einem Prozentsatz einstellen
Dieses Beispiel zeigt, wie man einen Prozentsatz verwendet, um den Zeilenabstand eines Absatzes zu setzen.
Den Zeilenabstand mit einem Pixelwert einstellen
Dieses Beispiel zeigt, wie man einen Pixelwert verwendet, um den Zeilenabstand eines Absatzes zu setzen.
Den Zeilenabstand mit einer Zahl einstellen
Dieses Beispiel zeigt, wie man eine Zahl verwendet, um den Zeilenabstand eines Absatzes zu setzen.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0