html - Can specific text character change the line height?

Question

I have this code:

<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>

<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>

Answer 1

My question is which behavior is the correct one.

All of them are correct because we don't have the same default font in all browsers and it's also different depending on the OS.

Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?

Character doesn't change line-height. To be more accurate, line-height is a property that can only be changed by setting line-height but you are probably confusing with the line box that is defined by the line-height and a character alone cannot change it.

Shouldn't line-height: 1 imply it can fit exactly any text?

Not necessarely, line-height:1 means that the line box will be equal to the 1xfont-size ¹ but is the font designed to include all the character inside this space? Probably most of them will do but we don't know.

---

Basically, you have two things to consider. The content area that is defined by the font properties and the line box that is defined by the line-height. We have no control over the first one and we can only control the second one.

Here is a basic example to illustrate:

span {
 background:red;
 color:#fff;
 font-size:20px;
 font-family:monospace;
}

body {
 margin:10px 0;
 border-top:1px solid;
 border-bottom:1px solid;
 animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    line-height:0.2
  }
  
  to {
    line-height:2
  }
}

<span >
blah_blah
</span>