CODEWITHSUNDEEP
htmlcssimageline-height
Cardy Tse
Cardy Tse

Reputation: 11

Does line-height apply to the img tag?

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{

}

I know that set the display of the image to block would be useful, but I'm curious about why line-height can't remove the descender space from images or line-height can only remove the inline descender space of text.

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 it is, why it can't clear its default margin as an inline element

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

Upvotes: 1

Views: 34

Answers (0)

Related Questions