'line-height: 1' makes line height shorter than text height

Question

'line-height:1' supposedly gives the line's height a value that is one times the size of the font.

How can then the line's height be shorter than the text's height ?

The following snippet demonstrates this scenario. The letter 'g' overflows the line height. Selecting all text helps seeing it.

.item {
  font-size: 10rem;
  background: green;
  padding: 0;
  margin: 0;
  line-height: 1;
}

<div class="item">This first thing</div>
<div class="item">This last thing</div>

Thanks.

/Edit The question has been marked as a duplicate. The other questions asks if a specific character can change the line-height, I ask why line-height: 1 creates a line box shorter than content box. Clearly different, not a duplicate.

Nevertheless the other question's answer includes a part where it answers clearly what is asked in this question.

detailed answer here: https://stackoverflow.com/a/55978512/8620333 to understand the difference between content area and linebox — Temani Afif, May 11 '19 at 19:52

score 1 · Answer 1 · answered May 11 '19 at 19:32

You have the right idea - but sadly The font size doesn't actually always correlate to the distance from the top of the highest ascender to the bottom of the lowest descender. this is just more backup to say that it is supposed to work the way you are thinking. https://graphicdesign.stackexchange.com/questions/4035/what-does-the-size-of-the-font-translate-to-exactly

The browsers do an okay job of "calculating" the proper line-height if you use line-height: normal;

.item {
  font-size: 10rem;
  background: green;
  padding: 0;
  margin: 0;
  line-height: 10rem;
}

<div class="item">This first thing</div>
<div class="item">This last thing</div>

'line-height: 1' makes line height shorter than text height

1 Answers1