Detailliertes Verständnis der Zeilenhöhe in CSS

div {line-height:6px; } 
div {line-height:10.5; }

Text text text text text text text text text text text text text text text text text text text text text text text< ;/div>
Wenn wir .test {line-height:20px;} definieren, hängt die tatsächliche Höhe dieses Elements vom Inhalt ab. Wenn der Textteil im Browser als Linie angezeigt wird, beträgt die tatsächliche Höhe des div 20px . Wenn der Text als zwei Zeilen angezeigt wird, beträgt die tatsächliche Höhe des Div 40 Pixel und die Zeilenhöhe des Texts beträgt 20 Pixel. Wenn wir .test{height:40px} definieren, ist dies die tatsächliche Höhe Das Element ändert sich im Allgemeinen nicht aufgrund der Menge des Inhalts. Wenn der Text als eine Zeile angezeigt wird, beträgt die Höhe des Div immer noch 40 Pixel. Wenn er jedoch als zwei Zeilen angezeigt wird, ist die Zeilenhöhe des Texts geringer Als 20 Pixel ändert sich die Höhe des Div aufgrund des Textinhalts nicht. Die Höhe ist kleiner als die Höhe und ändert sich. Wenn die Höhe des Textinhalts jedoch größer als 40 Pixel ist, erhöht sich im Allgemeinen die Höhe des Div entsprechend.

Zeilenhöhe und Zeilenhöhe
Höhe und Zeilenhöhe sollten in CSS die Rolle der Höhe spielen! Wenn eine Beschriftung das Höhen--Attribut (einschließlich der prozentualen Höhe) nicht definiert, muss die endgültige angezeigte Höhe durch die Zeilenhöhe bestimmt werden, auch wenn der Standardhöhenfehler unter IE6 etwa 11 Pixel beträgt. Lass es mich dir langsam sagen.

Lassen Sie mich zunächst über ein Phänomen sprechen, das jeder kennt. Es gibt ein leeres Div, , wenn der Höhenwert nicht mindestens größer als 1 Pixel ist , die Höhe des Div beträgt 0. . Wenn ein Leerzeichen oder Text in das Div eingegeben wird, hat das Div eine Höhe. Haben Sie jemals darüber nachgedacht, warum es nach dem Text im Div eine Höhe gibt?

Dies ist eine scheinbar einfache Frage, aber es ist eine sehr wichtige Frage, um die Zeilenhöhe zu verstehen. Manche Leute denken vielleicht, dass es daran liegt, dass die Worte es offen halten! Der Text nimmt Platz ein und streckt das Div auf natürliche Weise. Zuerst habe ich es so verstanden, aber nachdem ich das Inline-Modell genau verstanden hatte, stellte ich fest, dass es überhaupt nicht der Text ist, der die Höhe des Div erweitert, sondern die Zeilenhöhe!

Hinweis zur Zeilenhöhe

1. Die Zeilenhöhe funktioniert nur für Text und nicht für

Bilder 2. Verwenden Sie Dreamweaver, um den Zeilenhöheneffekt in Echtzeit anzuzeigen.
3. Negative Werte können für diesen Wert nicht verwendet werden, und er ist ungültig, wenn er verwendet wird.
Es sollte beachtet werden, dass dies in jedem Fall der Fall ist Browser, für line-height Es gibt auch einen subtilen Unterschied in der Höhenauflösung. Wenn die Zeilenhöhe eine gerade Zahl ist, wird sie von den meisten Browsern normal interpretiert Ungerade Zahl, einige Browser haben 1 Pixel mehr als unten, während andere 1 Pixel mehr unten als oben hinzufügen. Für einige Websites mit strengen Anforderungen wird empfohlen, beim Entwerfen der Zeilenhöhe

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