suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist die CSS-Eigenschaft, die die Zeilenhöhe angibt?

Was ist die CSS-Eigenschaft, die die Zeilenhöhe angibt?

青灯夜游
青灯夜游Original
2021-07-05 17:45:152560Durchsuche

Das CSS-Attribut, das die Zeilenhöhe angibt, ist line-height. Dieses Attribut kann den Abstand zwischen Zeilen festlegen (line-height;). Der Attributwert darf keine negative Zahl sein. Bei Anwendung auf ein Element auf Blockebene definiert das Attribut line-height den minimalen Abstand zwischen den Grundlinien im Element und nicht den maximalen Abstand.

Was ist die CSS-Eigenschaft, die die Zeilenhöhe angibt?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Die CSS-Eigenschaft, die die Zeilenhöhe darstellt, ist line-height.

line-height-Attribut kann den Abstand zwischen Zeilen festlegen (Zeilenhöhe); negative Werte sind nicht zulässig.

Das Attribut line-height beeinflusst das Layout von Zeilenfeldern. 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. Die Attributwerte, die durch das Attribut

line-height festgelegt werden können:

Wert Beschreibung
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.
Länge Festen Zeilenabstand festlegen.
% Zeilenabstand in Prozent basierend auf der aktuellen Schriftgröße.
inherit gibt an, dass der Wert des Attributs „line-height“ vom übergeordneten Element geerbt werden soll.

Beispiel: 

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
}
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>

<p>
这是一个标准行高的段落。
浏览器的默认行高为“1”。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>

<p class="small">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>

<p class="big">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>

</body>
</html>

Rendering:

Was ist die CSS-Eigenschaft, die die Zeilenhöhe angibt?

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas ist die CSS-Eigenschaft, die die Zeilenhöhe angibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Ist CSS ein Framework?Nächster Artikel：Ist CSS ein Framework?

In Verbindung stehende Artikel

Mehr sehen