Warum ist das Einstellen der Zeilenhöhe gleich dem vertikalen Text in der Höhe?

Ich versuche zu verstehen, wie die Eigenschaft Zeilenhöhe in CSS funktioniert. Ich weiß, dass es den Abstand zwischen den Zeilen des Textes einstellt. Was ich nicht verstehe ist, warum, wenn Sie die Zeilenhöhe auf die Höhe des Containers setzen, den Text vertikal ausrichten. Zum Beispiel, wenn Sie dies tun:Warum ist das Einstellen der Zeilenhöhe gleich dem vertikalen Text in der Höhe?

.btn { 
height: 22px; 
line-height: 22px; 
}

Und ein Element mit der „BTN“ Klasse erstellen, wird der Text in diesem Elemente wird vertikal in die Mitte auszurichten, und ich verstehe nicht, warum. Für mich macht es mehr Sinn, wenn die erste Textzeile ganz oben auf dem Container erscheint und die zweite Zeile unten, möglicherweise überfüllt, da diese 22px runter ist. Kann mir bitte jemand sagen, warum es so funktioniert, weil ich nicht das Gefühl habe, dass ich die Zeilenhöhen-Eigenschaft vollständig verstehen kann, wenn dies nicht erklärt wird. Vielen Dank.

Quelle

2016-08-08 RyanW

Zeilenhöhe ist der Abstand über und unter den Elementen. Das ist so ziemlich alles, was ich dir sagen kann.

Quelle

2016-08-08 04:26:02

Aber in meinem Beispiel, dass 11 Pixel über die Textzeile setzen würde, nicht 22. – RyanW

ja, es würde aber 11px über und unter dem Text insgesamt 22px. Zeilenhöhe von 22px fügt keine 22px nach oben und unten hinzu. es macht es so, dass die Gesamthöhe der Linie 22px ist. Da es 11px an den Anfang der Zeile gibt, drückt es den Text 11px im Wesentlichen nach unten, wodurch der Text zentriert wird. Entschuldigung, wenn die Erklärung schwer zu verstehen ist –

Ooooooh, ich denke ich verstehe es. Zeilenhöhe ist nicht "der Abstand zwischen Text". Es ist die vertikale Größe des Raums, auf den der Text gedruckt wird. Wenn ich zum Beispiel CSS für ein Blatt Standard-Papier schreiben könnte, wäre die Eigenschaft Zeilenhöhe der Abstand zwischen den blauen Linien, richtig? – RyanW

Wenn Sie den Text in ein Div einfügen, geben Sie dem Div eine Höhe und der Text wird auf 2 Zeilen vergrößert (vielleicht weil er auf einem kleinen Bildschirm wie ein Telefon angezeigt wird), dann überschneidet sich der Text mit den Elementen darunter. Auf der anderen Seite, wenn Sie dem div eine Zeilenhöhe geben und der Text auf 2 Zeilen wächst, wird das div erweitert (vorausgesetzt, Sie geben dem div nicht auch eine Höhe).

Hier ist ein link, die diese Höhe zu dem oberen und unteren vertikalen Abstand zwischen den Phrasen tatsächlich bezieht

.shorty 
{ 
    height: 12px; 
} 

.liney 
{ 
    line-height: 25px; 
}

Quelle

2016-08-08 04:29:30 Shailesh

OK .. Ich verstehe, dass Text überläuft es ist Container, wenn Sie eine bestimmte Höhe für den Container angeben .. aber ich sehe nicht, wie das meine Frage beantwortet. – RyanW

Linie zeigt. Der Grund, warum die Höhe auf die Zeilenhöhe eingestellt wird, da die ungültigen Leerzeichen automatisch zentralisiert werden. Teilen Sie die ähnliche Erklärung zur Zentralisierung des Körpers mit margin {auto 0}

Sie können mit den Beispielen in W3Schools spielen. http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height

Ref: http://www.w3schools.com/cssref/pr_dim_line-height.asp

Es hilft mir, CSS3 Syntax zu verstehen und Attribute noch mehr. Ich hoffe mein Anteil könnte Ihnen helfen. :)

Edited: Ich geschieht gerade hier eine bessere Antwort auf Ihre Frage zu finden: How do I vertically center text with CSS?

Quelle

2016-08-08 05:46:38 charlinagnes

Warum ist das Einstellen der Zeilenhöhe gleich dem vertikalen Text in der Höhe?

Antwort

Verwandte Themen