How to calculate the height of an inline element

Question

I have a span element with the following CSS:

span.test {
  font-size: 20px;
  line-height: 1;
}

Why the calculated height of

Answer 1

I couldn't find an answer to why it is applied. I found many forums with the same question...

But, as an answer to your request:

Is it possible to make it tall 20px without using inline-block ?

I managed to do it only by floating the element. It seems to lose whatever it was that was padding it... Then, setting the line-height to specific 20px makes it work.

span.test {
  font-size: 20px;
  line-height: 20px;
  float: left;
}

A

EDIT

Actually, adding float works because it makes inline elements behave like block elements.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/float