Wie interagiert die Zeilenhöhe mit Textzeichen und der Browserdarstellung?

Hängt die Zeilenhöhe vom Text ab? Zeichen?

<p>blah_blah</p><p></p><p></p><p>qypj;,</p>

> ;

Wenn Sie die Zeilenhöhe in CSS auf 1 setzen, kann das Verhalten von Browser zu Browser unterschiedlich sein. Dieses in Firefox gerenderte Beispiel zeigt, dass Unterstriche in der ersten Zeile nicht angezeigt werden, während dies in der dritten Zeile der Fall ist. Andere Browser und der Snippet-Runner zeigen in beiden Fällen Unterstriche an.

Welches Verhalten ist richtig?

Unterschiedliche Browser und Schriftarten können die Berechnung der Zeilenhöhe beeinflussen. Dies hängt nicht ausschließlich von der Eigenschaft „Zeilenhöhe“ ab.

Können Zeichen die Zeilenhöhe ändern?

Nein, Zeichen allein können die Zeilenhöhe nicht ändern. Bestimmte Zeichen wie „p“, „g“ und „j“ können jedoch unter die Grundlinie hinausragen und zum vertikalen Platz beitragen, der für die Linie benötigt wird.

Auswirkungen der Zeilenhöhe: 1

Das Festlegen der Zeilenhöhe auf 1 garantiert nicht, dass Text in den vorgesehenen Bereich passt. Es legt nur fest, dass das Zeilenfeld genau die Größe der Schriftart haben soll.

Inhaltsbereich vs. Zeilenfeld

Die Schriftarteigenschaften definieren den Inhaltsbereich und die Zeile -height steuert die Linienbox. Wir können den Inhaltsbereich nicht steuern, können aber das Zeilenfeld anpassen, um Text aufzunehmen.

Beispiel:

span {<br> Hintergrund: rot;<br>Farbe: #fff;<br>Schriftgröße: 20px;<br>Schriftfamilie: monospace;<br>}<p>body {<br> margin: 10px 0;<br> border-top: 1px solid;<br> border-bottom: 1px solid;<br>animation: 2s linear ändern unendliche Abwechslung;<br>}</p><p>@keyframes ändern {<br> von {</p><pre class="brush:php;toolbar:false">line-height: 0.2

}

zu {

line-height: 2

}
}

blah_blah<br>

In diesem Beispiel bleibt der Inhaltsbereich des Bereichs konstant, aber der Zeilenrahmen wird mit der Zeilenhöhe erweitert und verkleinert Änderungen. Dies demonstriert die unabhängige Steuerung von Inhaltsbereich und Zeilenfeld.

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