如何摆脱多线跨度线之间的空间？

Question

例如，这个JSFiddle：https://jsfiddle.net/qmn8q2ck/

<p>
    <span> This is some multiline text. This is some multiline text. </span><span>This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. </span>
</p>

span {
    background-color: red;
    display: inline;
}

但是，我注意到浏览器突出显示行之间没有空格，并且具有我想要的效果。

我如何获得此效果？

编辑以显示需要显示：内联和影响span元素而不是整个段落。

Answer 1

您还可以添加到span css display：inline-block

span {
  background: red;
  display: inline-block;
}

DEMO ：http://jsfiddle.net/qmn8q2ck/

或添加填充

DEMO ：http://jsfiddle.net/ckhfa8hc/

span {
  background-color: red;
  display: inline;
  padding-top: 1px;
}

Answer 2

使用css line-height属性

p { /* or span as you like */
   line-height: 90%; /* Try some values here */
}

Answer 3

你可以详细解释一下你的问题吗？ ..从我的理解......

您应该将background-color属性应用于段落而不是span

p { background-color: red; }

试试这个