背景属性仅适用于内容区而不是线盒。在大多数情况下，内容区域是由height。正如我们可以读到的在规范中 https://www.w3.org/TR/CSS21/box.html#content-height:
盒子内容区域的尺寸 - 内容宽度和
内容高度——取决于几个因素：元素是否
生成该框已设置“宽度”或“高度”属性， 无论
该框包含文本或其他框，该框是否是表格等。
And here https://www.w3.org/TR/CSS21/visudet.html#the-height-property:
该属性指定框的内容高度。
该属性不适用于非替换的内联元素。请参阅
部分关于计算非替换内联的高度和边距
所使用规则的元素 https://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced.
如果检查上面的链接我们可以读到：
“高度”属性不适用。内容区域的高度应该基于字体，但本规范没有明确规定
如何。例如，UA 可以使用 em-box 或字体的最大上升部分和下降部分。
Here is an illustration to better show youref https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image:
The content area is defined by the browser and in some case it can be the em1 that you see in above figure but not necessarely.
在所有情况下，无论如何line-height将是，内容区域将仅取决于字体属性。所以line-height定义行框的高度，内容区域的高度由字体属性定义。
所以真正的问题是：为什么默认情况下line-height不使行框等于内容区域？
如果检查我们检查文档 https://developer.mozilla.org/en-US/docs/Web/CSS/line-height我们可以看到默认值设置为normal and:
normal
取决于用户代理。桌面浏览器（包括 Firefox）
使用大约 1.2 的默认值，具体取决于元素的
字体系列。
Then
<number>（无单位）
使用值是这个无单位的<number>乘以元素本身的字体大小。
In some cases, we will have the line box a bit bigger than the content area which explain the gap.1
现在为什么要设置line-height to 1没有解决问题吗？
仅仅因为您设置了line-height跨度而不是line-height他们的容器还不够。这line-height容器的仍然是默认的1.2将被考虑，因为它大于1。换句话说，最大的line-height会赢。
下面是一些说明，以便更好地理解：
主体的线高是2并且只有更大的跨度线高才会产生效果：
body {
line-height:2
}
span {
background-color: red;
line-height: 1;
animation:change linear infinite 2s alternate;
}
@keyframes change {
to {line-height:3}
}
<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
将 line-height 设置为 body 就足够了，因为 span 将继承它：
body {
line-height:1; /*line-height is equal to content area*/
}
span {
background-color: red;
}
<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
1 Worth to note that in some cases and for some particular font, you may not see any gap and you won't even need to set line-height to 1 because the content area may be bigger enough to cover the line box since the calculation of both value are independent.
这是一些例子
span {
background-color: red;
}
div {
margin:5px;
}
<div><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
<div style="font-family:cursive"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
<div style="font-family:monospace"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
<div style="font-family:sans-serif"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
我们仅对第一个和最后一个示例有间隙。
