I can not google the following questions:

  1. Where does this indent come from above above the letters and for what purposes does it exist, in principle?
  2. Can I get rid of him?

  3. How to correctly calculate the indent between, for example, span and div, to take into account this gap over the text? More precisely, if I need, for example, a text indent in 30 pixels above the block, then how to take into account this very gap, which on a large kegel has a substantial size.

    span { font-size: 300px; line-height: 1; background: silver; } 
      <span>HojihtqgT</span>

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

Alas, I have sad news for you. These indents are “reserved font indents”, they are made specifically for all kinds of “tails” of characters; therefore, if you remove them, some characters may be truncated. It can be trimmed with the help of line-height , but this is bad and not correct.

    This is the font itself. Here, I added 2 more characters to the string - as you can see, the first rests exactly on the border, the second does not fit in the string at all.

     body { padding: 40px 0; } span { font-size: 300px; line-height: 1; background: silver; } 
     <span>Ĝ█HojihtqgT</span>