Hover effect on inline span goes away in between text gap [duplicate]

Question

In the following setup, when hovering over the actual text, the hover effect fires, all good there. But the hover effect goes away when hovering over the gap in between the lines of text. I'd like the hover event to happens always even in the gaps. I know if I set it to display block, that will fix it. But in my particular case I need it to be inline.

div {
  display: inline;
}

span {
  line-height: 40px;
}

span:hover {
  color: red;
}

<div>
  <span>
    long text, needs to be display inline. long text, needs to be display inline. long text, needs to be display inline. long text, needs to be display inline. long text, needs to be display inline. 
  <//span>
</div>

Answer 1

try adding padding to the span, such as padding: 15px 0px; (top and bottom, not sides) to cover the gap between the lines. this should fix it