Warum würde die Höhe mit einer kleineren Schriftgröße zunehmen?
Ich habe einen Block mit einer bestimmten Zeilenhöhe, in den ich Inhalt mit dem Pseudoelement ::before einfüge.
Das funktioniert gut. Wenn ich aber auch dem Inhalt eine kleinere Schriftgröße gebe
%Vor%Der Block wird tatsächlich höher. Warum ist das so?
JsFiddle . Die obere Zeile hat keine Änderungen der Schriftgröße, die untere Zeile.
Nun habe ich herausgefunden, dass es eine mögliche Lösung ist, line-height des Pseudo-Elements auf 0 zu setzen. Oder zu 1em . Oder sogar zu normal . Also, was ist los? Ist der line-height auf einen seltsamen Wert gesetzt, indem die Schriftgröße auf .6em gesetzt wird? Warum?
PS Obwohl dies wie ein Duplikat aussieht (siehe Liste rechts), erklärt keine der Antworten, die ich bisher gelesen habe, warum die Einstellung line-height:normal das Problem löst. Es muss etwas passieren, das die Zeilenhöhe implizit auf einen größeren Wert setzt. Und das versuche ich herauszufinden.
4 Antworten
Die Höhe der Felder .lorem, .ipsum, .dolor und .sit ist jeweils die Höhe der einzelnen Zeilen, die sie enthalten.
Die Höhe jeder Linienbox ist das Maximum der Höhe über der Grundlinie + die maximale Höhe unter der Grundlinie der Strebe der Linie und der Text in der Linie. da die Strebe und der Text auf der Grundlinie ausgerichtet sind.
Aus Gründen der Übersichtlichkeit beziehen sich Höhen unterhalb von em auf die Schriftgröße des gesamten Containers (d. h. des body-Elements)
In .ipsum, (wo die Schriftgröße 1em ist) ist die Höhe über der Grundlinie 1em (die obere Hälfte) + 13 / 16em (die Oberlänge, ca.) sowohl für die Strebe als auch für den Text und die Höhe unter der Grundlinie ist 1em (die Hälfte der führenden) + 3 / 16em (die Unterlänge, ca.) + 1em (die untere Hälfte der führenden) insgesamt 3em machen.
In .sit (wobei die Schriftgröße 0,6 em ist) ist die Höhe über der Grundlinie das Maximum von [1em (die obere Hälfte) + 13 / 16em (die Oberlänge, ungefähr) für die Strebe] und [1.2 em (die obere Hälfte) + 0,6 x 13 / 16em (die Oberlänge, ungefähr) für den Text], und die Höhe unter der Grundlinie ist das Maximum von [1em (die untere Hälfte der führenden) + 3 / 16em (die Abseilgerät, ca.) für die Strebe] und [1.2em (die untere Hälfte-Führung) + 0,6 x 3 / 16em (das Abseilgerät, ca.) für den Text].
Wenn Sie dies auswerten und in Dezimalzahlen umwandeln, erhalten Sie 1.8125em über der Grundlinie und 1.3125em unter der Grundlinie, was insgesamt 3.125em ergibt, was größer ist als die 3em von .ipsum.
Bearbeiten: Diese Frage hat in letzter Zeit eine ganze Reihe neuer Augäpfel gehabt, also ist hier ein Update, um es nützlicher zu machen.
Alohcis Lösung ist korrekt, aber für Grafikscharfer ist es vielleicht nicht ganz klar.
Also erlauben Sie mir, die Lösung ein wenig zu verdeutlichen, mit Bildern.
Erstens wird die Zeilenhöhe als berechnete Größe vererbt. Obwohl sie in em units angegeben ist, erben die untergeordneten Elemente den Wert in Pixeln. Bei einer Schriftgröße von 20px und einer Zeilenhöhe von 3em beträgt die Zeilenhöhe beispielsweise 60 Pixel, selbst für Nachfahren mit unterschiedlichen Schriftgrößen (sofern sie nicht ihre eigenen Zeilenhöhen angeben).
Nehmen wir nun eine Schriftart mit einem 1/4 Unterlängen an. Das heißt, wenn Sie eine Schriftart 20px haben, ist die Unterlänge 5 Pixel und die Oberlänge 15 Pixel. Die verbleibende Zeilenhöhe (in diesem Fall 40 Pixel) wird dann gleichmäßig über und unter der Grundlinie aufgeteilt, so wie diese.
Für den Block mit der kleineren Schrift (0,6 m oder 12 Pixel) beträgt die verbleibende Zeilenhöhe 60-12 oder 48 Pixel, die ebenfalls gleichmäßig aufgeteilt wird: 24 oben und 24 unter der Grundlinie.
> 
Wenn Sie die beiden Schriftarten auf derselben Grundlinie kombinieren, sehen Sie, dass die Linienhöhen nicht auf die gleiche Weise geteilt sind, so dass die Gesamthöhe des umschließenden Blocks zunimmt, obwohl beide Linienhöhen 60 Pixel betragen / p>
Ich hoffe, das erklärt die Dinge!
Die font-Eigenschaft auf .sit: before beeinflusst dies, die content-Eigenschaft von css folgt sehr genau den css-Eigenschaften der aktuellen Elemente,
Aus diesem Grund können Sie den Wert der content -Eigenschaft im selben Stil bearbeiten, in dem die content -Eigenschaft erstellt wurde
z. B.
%Vor%Dies würde die Farbe unterstreichen, um rot zu sein.