I have problem about line-height and img tag.
I have a div like this:

  <div class="text-height">
    abcdefghijklmnopqrstuvwxyz
    <img src="...." />
  </div>

and the css:

.text-height{
  color: white;
  font-size: 20pt;
  line-height: 0;
}

img{

}

When I set line-height: 0 in the text-height class and height: 0 in the img, I found that the div still has height in the document flow

1. First, I removed the img, leaving only the text in the div, and I set line-height: 0 in the text-height class.”only text

2. Next, I added the img tag, which expanded the height, but the text still does not occupy any height. The result is as follows:text and image with default height

3. Then, I set the height:0 in the img. The result should look like Figure 1, right? (I’m not sure about this, but I think it should be) but I got this result instead: the div still retains some height.text and image with zero height

4. When I set the display of the img to block, the gap disappeared I got the result just like Figure 1, so I believe this gap is the some default margin added by the browser to inline elements.

5. Does this mean that line-height doesn’t work on img? Can’t it clear its default margin as an inline element? so I set the line-height of the class text-height to 10, it seems work.line-height:10

So, Does line-height apply to the img tag?

If is, why it can’t clear its default margin as an inline element

If not, Does line-height only work for text?

Thanks for your answer.