Line height and background color (Span vs Div)

Question

Its like few days pass and again when I try to recall what I read about line-height is something misleading what I am seeing

<span>Color me</span>

span {
    line-height: 52px;
    background: red;
    font-size: 14px;
}

Why it does not color complete box (i.e complete line-height)?

But When I do the same with div it colors as required.

<div>Color me</div>

div {
    line-height: 52px;
    background: red;
    font-size: 14px;
}

Answer 1

In this particular case you need to add the following:

span {
  display: inline-block;
  /* ... */
}

As for the reason why, see this StackOverflow answer.

Answer 2

Since span is an inline element it occupies only the height of the text and it does not cover the full area whereas in div it is a block element so it can cover the full area.

The method to convert the inline element to block element is

span{display: inline-block;}