Was ist die Zeilenhöhe in CSS?

In CSS bezieht sich die Zeilenhöhe auf den leeren Bereich einschließlich des Inhaltsbereichs und die symmetrische Erweiterung basierend auf dem Inhaltsbereich. Sie kann auch als vertikaler Abstand zwischen den Grundlinien benachbarter Textzeilen betrachtet werden. Die Zeilenhöhe kann mit der Eigenschaft line-height festgelegt werden, die keine negativen Werte zulässt.

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

Die Zeilenhöhe umfasst den Inhaltsbereich und den leeren Bereich, der basierend auf dem Inhaltsbereich symmetrisch erweitert wird. Im Allgemeinen kann man ihn auch als den vertikalen Abstand zwischen den Grundlinien benachbarter Textzeilen betrachten. Um diesen Satz zu verstehen, müssen Sie zunächst einige Grundkenntnisse verstehen:

obere Linie, mittlere Linie, Grundlinie, untere Linie

nbsp;html>

    
        <title>Test</title>
        <style>
            span
            {
                padding:0px;
                line-height:1.5;
            }
        </style>
    
    
        <div>
            <div>
                <span>中文English</span>
                <span>English中文</span>
            </div>
        </div>
    

Die vier Linien von oben nach unten sind obere Linie, mittlere Linie, Grundlinie, Wie die vier Zeilen und drei Leerzeichen, als wir das englische Alphabet lernten, wissen wir, dass die Attribute für die vertikale Ausrichtung „oben“, „mitte“, „grundlinie“ und „unten“ umfassen, die sich auf diese vier Zeilen beziehen.

Denken Sie besonders daran, dass die Grundlinie nicht das Endergebnis ist, sondern das Endergebnis das Endergebnis.

Linienhöhe, Zeilenabstand und Halbabstand

Die Linienhöhe bezieht sich auf den vertikalen Abstand zwischen den Grundlinien der Kontextlinie, also den vertikalen Abstand zwischen den beiden roten Linien im Bild.

Legging bezieht sich auf den vertikalen Abstand von der unteren Linie einer Reihe zur oberen Linie der nächsten Reihe, also den vertikalen Abstand zwischen der rosa Linie der ersten Reihe und der grünen Linie der zweiten Reihe.

Der halbe Zeilenabstand ist die Hälfte des Zeilenabstands, also der vertikale Abstand von Bereich 3/2, die Summe der Abstände der Bereiche 1, 2, 3 und 4 ist die Zeilenhöhe und die Summe der Abstände der Bereiche 1, 2 und 4 ist die Schriftgröße, also der halbe Zeilenabstand. Sie kann auch so berechnet werden: (Zeilenhöhe - Schriftgröße)/2

Inhaltsbereich, Inline-Box, Zeilenbox

Inhaltsbereich: Der von der unteren und oberen Zeile umschlossene Bereich, d. h. der dunkelgraue Hintergrund im Bild unten.

Inline-Box: Die Inline-Box ist ein Konzept im Browser-Rendering-Modell und kann nicht angezeigt werden box Das Feld entspricht dem Inhaltsbereich. Beim Festlegen der Zeilenhöhe bleibt die Höhe des Inline-Felds unverändert und der halbe Zeilenabstand [(Zeilenhöhe-Schriftgröße)/2] erhöht/verringert sich auf Ober- und Unterseite des Inhaltsbereichs (dunkelblauer Bereich) bzw.

Zeilenfeld (Zeilenfeld), Zeilenfeld bezieht sich auf ein virtuelles rechteckiges Feld dieser Zeile. Dies ist ein Konzept im Browser-Rendering-Modus und nicht tatsächlich angezeigt. Die Höhe der Zeilenbox entspricht dem größten Wert der Inline-Box unter allen Elementen in dieser Zeile (die Inline-Box mit dem größten Zeilenhöhenwert wird als Benchmark verwendet, und andere Inline-Boxen werden anhand ihrer eigenen an der Benchmark ausgerichtet Ausrichtungsmethoden und die Höhe des Zeilenfelds wird schließlich berechnet).

<div>
                <span>中文English</span>
                <span>中文English</span>
                <span>English中文</span>
                <span>English中文</span>
            </div>

line-height

Da nun die Grundkonzepte klar sind, können wir über das Attribut line-height sprechen, den Protagonisten dieses Artikels.

Definition: Das Attribut line-height legt den Abstand (Linienhöhe) zwischen Linien fest und es können keine negativen Werte verwendet werden. Diese Eigenschaft beeinflusst das Layout des Linienfelds. 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 (Zeilenabstand) 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.

Mögliche Werte

Wert	Beschreibung
normal	Standardmäßig wird ein angemessener Zeilenabstand festgelegt.
Zahl	Legen Sie eine Zahl fest. Diese Zahl wird mit der aktuellen Schriftgröße multipliziert , um den Zeilenabstand festzulegen. Entspricht einem Vielfachen von
length	, um einen festen Zeilenabstand festzulegen.
%	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.

貌似很简单，但感觉没什么用出的样子，那就让我们看看line-height的几个应用

div文字垂直居中

div居中对齐一直是个难题，水平还好解决些，margin：0 auto; 可以解决现代浏览器，IE下text-align:center。但垂直居中就没那么简单了，默认是这样子的。

<div style="width:150px;height:100px;background-color:#ccc;">
                <span>This is a test.<br/>
                        This is a test.                </span>
            </div>

我们可以利用line-block这样做

<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
                <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>
                        This is a test.
                </span>
            </div>

单行就比较简单了，把line-height设置为box的大小可以实现单行文字的垂直居中

<div style="line-height:100px;border:dashed 1px #0e0;">
                This is a test.            </div>

元素对行高影响

行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。

<div style="border:dashed 1px #0e0;margin-bottom:30px;">
                <span style="font-size:14px;background-color:#999;">This is a test</span>
            </div>
            <div style="border:dashed 1px #0e0;">
                <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
            </div>

第二个span虽然因为padding原因内容区变大，当行高并未改变

行高的继承

行高是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。

<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                    123
                </p>
            </div>

按一般理解既然line-height可以继承，那么p元素的行高也是150%了，可是事实是这样的

非但没有变成150%，反而连100%都没有，重叠了！这就是继承计算的结果，如果父元素的line-height有单位（px、%）,那么继承的值则是换算后的一个具体的px级别的值；上例p得到的是10px*150%=15px的行高，而P的字体大小为30px，所以发生了重叠。

而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                    123
                </p>
            </div>

所以在使用line-height时，除非你刻意否则尽量使用倍数设值

（学习视频分享：css视频教程）

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