How height: auto interacts with line height: 0 and different font sizes

Question

HTML:

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

CSS

 div { line-height: 0; } 

In this case, the div gets height: 0 .

---

However, when I specify a larger font-size as

 span { font-size: 100px; } 

Despite the fact that line-height: 0 , the div gets a non-zero height.

You can check the demo at https://jsfiddle.net/cjvpLfv2/

EDIT: add another demo at https://jsfiddle.net/cjvpLfv2/12/

If I applied font-size: 100px to span and div , div will get height: 0px again

---

My question is how height: auto interacts with line-height and font-size in this simple situation (block-level container with one inline element)

Answer 1

1) The font size determines the height of the line. If nothing is defined, the normal coefficient for line height seems to be 1.2 .

2) The line height determines the height of the automatic box , regardless of the font size. (In many cases, people do not determine the height of the line, so essentially “font size plus fudge factor” determines the height of the window, which seems natural). Update: Of course, what type inside requires. Box requirements come from above. (And, built-in or not, space is a box ...). Frank, I still miss a piece of the puzzle.

3) If you use font size 0 and line height 100, I get a window with zero height:

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

see the code here (the last field has your use case) . Box 4-6 proves point (2).

The linear height you get is related to giving the style part an internal <span> , not a <div> . See here.

Answer 2

Although the CSS line-height style is 0 for all elements, including span elements, it displays differently in the browser. I tried adding a few lines to the spaces, and the height of the outer div is multiplied accordingly:

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

Thus, it seems that the browser does not allow a line height of 0 for large font sizes. The font size in which the line height exceeds 0 is 17 pixels in Chrome.

If the feature for displaying features is set to inline-block , the lines no longer add up, but the line height remains:

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

If you set the property to map features to block , row-height: 0 applies as expected:

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

I have not found any documentation for this behavior, and the box-model page on mdn simply states that:

for unoccupied inline elements, the amount of space occupied (contribution to the line height) is determined by the line-height property