How does height:auto interact with line-height:0 and different font-size

Question

HTML:

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

CSS:

div {
    line-height: 0;
}

The div gets height: 0 in this circumstance.

---

However, when I specify a larger font-size like

span {
    font-size: 100px;
}

Although there's line-height: 0, the div gets a non-zero height.

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

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

If I apply font-size: 100px to both span and div, the div gets height: 0px again

---

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

Answer 1

This answer is a bit late, but your question intrigued me so I decided to play around with it. After some time, I discovered the answer is actually pretty simple:

The height of div is equal to the line-height.

The reason why your line-height becomes non-0 is because you have different font-sizes. It doesn't matter that this size difference is between div and span, you could have 2 different font-sizes within the span element. The point is that as soon as you have 2 different font-sizes the line-height becomes non-0.

I don't know the exact formula, but it seems based upon the difference in size, more specifically the difference in distance between the middle of both sizes. You'll see that the bottom and top border of div will align with the middle of the smallest and largest font-size respectively.

You can easily demonstrate this by adding AaGg between the opening div and span tag of your second block of html code, as such:

<div>AaGg
<span class=big-font-size>AaGg</span>AaGg
</div>

I don't know why or the exact details of computation, but this newly calculated line-height basically overrides your specified line-height: 0;