Wie Höhe hat: auto mit line-height interagieren: 0 und verschiedenen font-size

Question

HTML:

<div> 
    <span>Some text here...</span> 
</div> 

CSS:

div { 
    line-height: 0; 
} 

Die div bekommt height: 0 in diesem Umstand.

---

Allerdings, wenn ich eine größere font-size angeben wie

span { 
    font-size: 100px; 
} 

Obwohl gibt es line-height: 0, die div eine von Null Höhe bekommt.

Sie die Demo bei https://jsfiddle.net/cjvpLfv2/ überprüfen

EDIT: fügen Sie eine weitere Demo auf https://jsfiddle.net/cjvpLfv2/12/

Wenn ich font-size: 100px sowohl auf span und div gelten, die div bekommt height: 0px wieder

---

Meine Frage ist, wie height: auto mitinteragierenund font-size in dieser einfachen Situation (ein Block-Level-Container mit nur einem Inline-Element)

Answer 1

1) Schriftgröße diktiert die Zeilenhöhe. Wenn nichts definiert ist, the normal factor for line-height seems to be 1.2.

2) Zeilenhöhe diktiert automatische Box Höhe, unabhängig von der Schriftgröße. (In vielen Fällen definieren Menschen keine Zeilenhöhe, daher bestimmen im Wesentlichen "Schriftgröße plus ein Fudge-Faktor" die Kastenhöhe, die natürlich erscheint). Update: Natürlich ist das, was Typ innerhalb Forderungen ist. Anforderungen von Boxen kommen an der Spitze. (Und, Inline oder nicht, Raum ist eine Box ...). Frank, ich vermisse immer noch ein Stück des Puzzles.

3) Wenn Sie font-size 0 und Zeilenhöhe 100 verwenden, erhalte ich eine Null-Höhe Box:

<div style='font-size:100px; line-height: 0'> 
    <span>Some</span> 
</div> 

see codepen here (last box has your use case). Kasten 4 bis 6 belegen Punkt (2).

Die Linienhöhe, die Sie bekommen, hat damit zu tun, dass Sie einen Teil des Stylings dem inneren <span> geben, nicht dem <div>. See here.

Answer 2

Obwohl der CSS-Stil line-height für alle Elemente 0 ist, einschließlich der span Elemente, wird es im Browser anders angezeigt. Ich habe versucht, mehrere Zeilen zu den Spannweiten hinzuzufügen, und die Höhe der äußeren div vervielfacht entsprechend:

https://jsfiddle.net/cjvpLfv2/4/

So scheint es, dass der Browser keine Zeilenhöhe von 0 für großen font- erlaubt Größen.Die Schriftgröße, bei der die Zeilenhöhe über 0 liegt, scheint in Chrome 17 Pixel zu betragen.

Wenn Sie die Spannweiten Anzeigeeigenschaft zu inline-block, die Linien nicht mehr stapeln, aber die Zeilenhöhe bleibt:

https://jsfiddle.net/cjvpLfv2/6/

Wenn Sie die Spannweiten gesetzt display-Eigenschaft auf block, line- wie erwartet angewendet 0 ist: Höhe

https://jsfiddle.net/cjvpLfv2/7/

ich alle Unterlagen für dieses Verhalten gefunden zu haben, und die box-model page on mdn nur cl zielt darauf ab, dass: die Menge an Speicherplatz

für nicht-ersetzte Inline-Elemente, aufgenommen (der Beitrag zur Höhe der Linie) durch die line-height-Eigenschaft bestimmt wird