Was ist der Unterschied zwischen line-height:1.5 und line-height:150% in css?

Jemand weiß es?

InformationsquelleAutor user198729 | 2010-01-11
  1. 26

    Kurze version: line-height: 150% statischen line-height: 1.5 ist dynamisch. Der Effekt ist deutlicher auf die Erben Elemente. Ein Beispiel:

    HTML

    <div style="font-size: 12px">
    <span style="font-size: 24px">test</span>
</div>

    Diese CSS -

    div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */
span { }                   /* Computed line-height: 18px (inherited directly) */

    Im Gegensatz zu diesem:

    div { line-height: 1.5 }   /* Computed line-height: 18px (1.5 * 12px) */
span { }                   /* Computed line-height: 36px (1.5 * 24px) */

    Können Sie Lesen Sie mehr auf der CSS2-Spezifikationen Seite

    • Ich würde für +2, wenn ich könnte, es hat mich zu viel Zeit, um kommen mit klaren Sätzen zu erklären
    • Ich denke, 150% wird berechnet, indem die geerbte Schriftgröße,aber 1,5 wird berechnet, indem die berechnete Schriftgröße.Ist das richtig?
    • Es ist mehr wie 150% nur direkt vererbt, aber 1.5 recalculaltes jeder Zeit
    InformationsquelleAutor K Prime
  2. 11

    Beide sind gleichwertig.

    line-height: 1.5 (ohne Einheiten) mutiply das element font-size von 1.5 zur Berechnung der Zeilenhöhe.

    line-height: 150% nehmen 150% des Elements berechnet font-size zur Berechnung der Zeilenhöhe, die äquivalent ist zu multiplizieren Sie ihn mit 1.5.

    Den drei Regeln in dem Beispiel unten haben die gleiche resultierende Zeilenhöhe:

    div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

    Lassen Sie uns nun einen Blick auf die Frage, die Sie fragte.

    Ich reproduziert, die die zwei Fälle:

    1. http://gregory.pakosz.fr/stackoverflow/2040694-number.html
    2. http://gregory.pakosz.fr/stackoverflow/2040694-percentage.html

    In 1), des übergeordneten div ' s line-height eingestellt ist 1.5 multipliziert die div tatsächliche Schriftgröße. Diese Eigenschaft wird vererbt und neu für das Kind span denn Sie verändert die tatsächliche Schriftgröße.

    In 2), des übergeordneten div 's line-height eingestellt ist 150% des div' s berechnete Schriftgröße. Dann die berechnete Schriftgröße der span ist geerbt von der div daher 150% dieser geerbt berechnete Schriftgröße führt zu dem gleichen Wert.

    Wie @K Prime summiert, die take away ist wahrscheinlich: line-height: 150% statischen line-height: 1.5 ist dynamisch

    Referenzen:

    • Nein,sind Sie nicht.Siehe meinen vorherigen post: stackoverflow.com/questions/2040694/...
    • Ist nicht "element" font-size" und "Elements berechnete Schriftgröße" das gleiche?
    • Nein sind Sie nicht. Es dauerte eine Weile, bis die Dateien hochladen, in der Zwischenzeit, die anderen Antworten sind völlig in Ordnung, wie auch
    InformationsquelleAutor Gregory Pakosz
  3. 1
    line-height:  normal | 

<number>| 

<length>| 

<percentage>

    Vom line-height

    <number>

    Der verwendete Wert ist diese unitless multipliziert mit dem element font-size. Der berechnete Wert ist die gleiche wie die angegebene . In den meisten Fällen ist dies die bevorzugte Art der line-height ohne unerwartete Ergebnisse bei der Vererbung.

    <percentage>

    Relativ zur Schriftgröße des Elements selbst. Der berechnete Wert ist dieser Prozentsatz multipliziert mit dem element berechnete Schriftgröße.

    InformationsquelleAutor rahul
Schreibe einen Kommentar