So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest-HTML-Tutorial-php.cn

So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest

青灯夜游

Freigeben： 2023-02-08 13:57:38

Original

21994 Leute haben es durchsucht

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.

So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest

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>

Nach dem Login kopieren

Rendering

So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest

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;

Nach dem Login kopieren

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!