Zeilenabstand in CSS festlegen

Wir werden einige Methoden vorstellen, um den Zeilenabstand in CSS festzulegen.

Verwenden Sie die Eigenschaft line-height, um den Zeilenabstand in CSS festzulegen

Wir können die CSS-Eigenschaft line-height verwenden, um den Abstand zwischen den Zeilen in einem Absatz zu definieren. Die Eigenschaft legt die Höhe einer Linie fest.

Beim Definieren der Zeilenhöhe wird der Abstand zwischen den Zeilen entsprechend vergrößert oder verkleinert. Wir können die Eigenschaft line-height auf Textelemente anwenden, insbesondere auf einen Absatz.

Die Eigenschaft nimmt verschiedene Werte wie normal, number, length, %, initial und inherit an. Wir werden die Verwendung dieser verschiedenen Optionen im Artikel demonstrieren.

Der Wert normal ist der Standardwert für die Eigenschaft line-height. Es wird die normale Zeilenhöhe einstellen.

Wir können den Wert als einheitenlose number einstellen. Die angegebene Zahl wird mit der aktuellen Schriftgröße multipliziert und dient zur Einstellung der line-height verwendet. Die Zahl 1.6 ist der empfohlene Wert für die Eigenschaft line-height.

Wir können auch den Wert length verwenden und die Einheiten wie pt, px, cm usw. angeben. Der Wert in % gibt den Prozentsatz der aktuellen Schriftgröße an, um die line-height einzustellen.

Wir können den Standardwert der Eigenschaft line-height mit dem Wert initial festlegen. Der Wert inherit verwendet denselben Wert der Eigenschaft aus seinem Elternelement.

Erstellen Sie beispielsweise vier div in HTML mit den Klassen normal, number, percentage und length. Schreiben Sie in das div einen Dummy-Text.

Wählen Sie dann in CSS das Element div aus und setzen Sie die Eigenschaft width auf 400px und die Eigenschaft word-wrap auf break-word. Wählen Sie als Nächstes das Individuum div mit dem Klassennamen aus und setzen Sie die Eigenschaftswerte line-height auf normal, 2, 80% und 10px entsprechend den im Beispiel unten gezeigten Klassennamen.

Wir setzen die Breite div und die Eigenschaft word-wrap auf break-word, um den Text in die nächste Zeile zu zwingen. Auf diese Weise können wir mit der Eigenschaft line-height den Zeilenabstand in CSS einstellen.

Beispielcode:

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}