Was bedeutet Zeilenabstand in CSS?

WBOY
Freigeben: 2022-04-24 15:07:19
Original
2197 Leute haben es durchsucht

In CSS wird der Zeilenabstand durch „line-height“ dargestellt; das Attribut „line-height“ wird verwendet, um den Abstand zwischen Zeilen, also die Zeilenhöhe, festzulegen. Sie können Prozenteinheiten verwenden, um den Zeilenabstand festzulegen. und der Attributwert kein negativer Wert sein darf, lautet die Syntax „Elementobjekt {Zeilenhöhe: Zeilenabstandswert;}“.

Was bedeutet Zeilenabstand in CSS?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was bedeutet Zeilenabstand in CSS?

Zeilenabstand ist der Abstand zwischen Zeilen. CSS legt den Abstand zwischen Zeilen (Zeilenhöhe) über das Attribut „Zeilenhöhe“ fest.

Es gibt kein Attribut, das den Zeilenabstand in CSS direkt festlegen kann. Daher müssen wir den Zeilenabstand mit „line-height“ festlegen. Je größer der Wert von „line-height“ ist, desto höher ist der Zeilenabstand.

Der Wert der Zeilenhöhe ist auf einen bestimmten Wert festgelegt, der ein relativer Wert oder ein absoluter Wert sein kann. Bei statischen Seiten werden häufig absolute Werte verwendet. Für Foren und Blogs Sie können Schriftarten anpassen. Die Größe der Seite wird normalerweise auf einen relativen Wert eingestellt, sodass der entsprechende Zeilenabstand mit der benutzerdefinierten Schriftgröße geändert werden kann.

Negative Werte sind nicht erlaubt.

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.

Der ursprüngliche numerische Wert gibt einen Skalierungsfaktor an, und untergeordnete Elemente erben diesen Skalierungsfaktor anstelle des berechneten Werts.

Das Beispiel sieht wie folgt aus:

<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

Was bedeutet Zeilenabstand in CSS?

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas bedeutet Zeilenabstand in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage