How do I remove this extra span height?

Question

I just stumbled upon this issue where the height of the <span> is greater than the font size I have set. Here it is:

span {
  font-size:   36px;
  padding:     0px;
  line-height: 1;
  background:red;
}

<span>Hello world</span>

Even with line-height: 1 and padding: 0px the span seems to get an extra 4 pixels of height. I noticed that display: block solves the issue but in my case that's not something practical because I need it inline.

Is there any 'trick' which would do this?

Answer 1

Try display: inline-block;

span {
  font-size: 36px;
  padding: 0px;
  line-height: 1;
  background: red;
  display: inline-block;
}

span.last {
  display: inline;
}

<span>Hello world (inline-block)</span> <span class="last">Hello world (inline)</span>