Wie steuere ich die Zeilenhöhe mit CSS?-CSS-Tutorial-php.cn

Wie steuere ich die Zeilenhöhe mit CSS?

青灯夜游

Freigeben： 2020-11-30 15:57:51

Original

6351 Leute haben es durchsucht

In CSS kann die Zeilenhöhe über das Attribut line-height gesteuert werden, das den Abstand (Zeilenhöhe) zwischen Zeilen durch Prozentsätze, Zahlen, Pixelwerte usw. festlegen kann; Syntax „line-height: attribute value;“ , der Attributwert kann auf Prozentwert, Zahl, Pixelwert und normales Schlüsselwort eingestellt werden.

Wie steuere ich die Zeilenhöhe mit CSS?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3, dieser Artikel gilt für alle Computermarken.

css line-height-Eigenschaft

line-height-Eigenschaft legt den Abstand zwischen Zeilen (Zeilenhöhe) fest.

Hinweis: Negative Werte sind nicht zulässig.

Dieses Attribut beeinflusst das Layout des Zeilenfelds. 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:属性值;

Nach dem Login kopieren

Mögliche Attributwerte

normal Standard. Stellen Sie einen angemessenen Zeilenabstand ein.
Zahl Legen Sie eine Zahl fest, die mit der aktuellen Schriftgröße multipliziert wird, um den Zeilenabstand festzulegen.
length legt einen festen Zeilenabstand fest.
% Prozentualer Zeilenabstand basierend auf der aktuellen Schriftgröße.

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.small1 {line-height:70%;}
p.big1 {line-height:200%;}
p.small2{line-height: 10px}
p.big2{line-height: 30px}
p.small3{line-height: 0.5}
p.big3{line-height: 2}
</style>
</head>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>

<p class="small1">
这是一个更小行高的段落。使用百分比设置<br>
这是一个更小行高的段落。使用百分比设置<br>
这是一个更小行高的段落。使用百分比设置<br>
这是一个更小行高的段落。使用百分比设置<br>
</p>

<p class="big1">
这是一个更大行高的段落。使用百分比设置<br>
这是一个更大行高的段落。使用百分比设置<br>
这是一个更大行高的段落。使用百分比设置<br>
这是一个更大行高的段落。使用百分比设置<br>
</p>
	
<p class="small2">
这是一个更小行高的段落。使用像素值设置<br>
这是一个更小行高的段落。使用像素值设置<br>
这是一个更小行高的段落。使用像素值设置<br>
这是一个更小行高的段落。使用像素值设置<br>
</p>

<p class="big2">
这是一个更大行高的段落。使用像素值设置<br>
这是一个更大行高的段落。使用像素值设置<br>
这是一个更大行高的段落。使用像素值设置<br>
这是一个更大行高的段落。使用像素值设置<br>
</p>
<p class="small3">
这是一个更小行高的段落。使用数值来设置<br>
这是一个更小行高的段落。使用数值来设置<br>
这是一个更小行高的段落。使用数值来设置<br>
这是一个更小行高的段落。使用数值来设置<br>
</p>

<p class="big3">
这是一个更大行高的段落。使用数值来设置<br>
这是一个更大行高的段落。使用数值来设置<br>
这是一个更大行高的段落。使用数值来设置<br>
这是一个更大行高的段落。使用数值来设置<br>
</p>

</body>
</html>

Nach dem Login kopieren

Wie steuere ich die Zeilenhöhe mit CSS?

Weitere Programmierkenntnisse finden Sie unter: Programmierunterricht! !

Das obige ist der detaillierte Inhalt vonWie steuere ich die Zeilenhöhe mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!