Heim > Artikel > Web-Frontend > So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest
So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest
- 青灯夜游Original
- 2021-02-26 16:35:4821900Durchsuche
In HTML können Sie das Attribut line-height verwenden, um den Abstand zwischen den einzelnen Textzeilen festzulegen. Das Syntaxformat ist „line-height:number|length|%;“. Mit dem Attribut „line-height“ können Sie die Zeilenhöhe festlegen und dann den Zeilenabstand (Abstand zwischen den Zeilen) des Textes anpassen. Je größer der Wert, desto größer der Abstand zwischen den einzelnen Textzeilen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
In HTML können Sie das Attribut line-height verwenden, um den Abstand zwischen den einzelnen Textzeilen festzulegen. Das Attribut „line-height“ kann die Zeilenhöhe festlegen und dadurch den Zeilenabstand von Text anpassen. Je größer der Wert der Zeilenhöhe ist, desto größer ist der Zeilenabstand.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p{
font-size: 20px;
border: 1px solid red;
}
.p2 {
line-height: 2em;
}
.p3 {
line-height: 3em;
}
</style>
</head>
<body>
<p class="p1">
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
</p>
<p class="p2">
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
</p>
<p class="p3">
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
</p>
</body>
</html>Rendering
line-height-Attribut
line-height-Attribut wirkt sich auf das Layout des Zeilenfelds aus. Wenn es auf ein Element auf Blockebene angewendet wird, definiert es den minimalen Abstand zwischen den Grundlinien in diesem Element und nicht den maximalen Abstand.
Der berechnete Unterschied zwischen Zeilenhöhe und Schriftgröße (in CSS als „Zeilenabstand“ bekannt) wird in zwei Hälften geteilt und am oberen und unteren Rand einer Textzeile hinzugefügt. Die kleinste Box, die diesen Inhalt enthalten kann, ist eine Zeilenbox.
Syntax:
line-height:value;
Mögliche Werte
normal: Standard. Stellen Sie einen angemessenen Zeilenabstand ein.
Zahl: Legen Sie eine Zahl fest. Diese Zahl wird mit der aktuellen Schriftgröße multipliziert, um den Zeilenabstand festzulegen.
Länge: Festen Zeilenabstand festlegen.
%: Prozentualer Zeilenabstand basierend auf der aktuellen Schriftgröße.
【Empfohlenes Tutorial: „HTML-Video-Tutorial“】
Das obige ist der detaillierte Inhalt vonSo legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!