为什么线盒之间有间距，而不是由于一半的引线间距？

Question

在下面的代码示例中，您将看到垂直流动的spans之间的空白。空格位于每个线框之间。

首先，我想说这与inline-block框之间的间隙，甚至与half leading的结果无关，在计算时，它们与内联级别框的顶部和底部相加最小线高。

来自CSS2.1 spec：

  

内联框的高度围住所有字形及其轮廓   半边领先，因此正好是“线高”。

并且：

  

（线框的）最小高度由基线以上的最小高度和基线以下的最小深度组成。...

注释：

• background-color（如下面的示例所示）覆盖了整个行框
• 尽管如此，每个线框之间仍然存在空白
• 我不是在寻求解决方案以消除差距。如果我想这样做，只需在display: inline-block
上设置span

为什么在CSS2.1 specification中存在差距。规范的哪一部分解释了间距？

示例代码：

// From CSS spec:
// The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'. Boxes of child elements do not influence this height.

span {
  background-color: red;
  line-height: 1;
}

<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>

Answer 1

背景属性仅适用于内容区域。在大多数情况下，内容区域由height定义。正如我们读到的in the specification：

  

盒子内容区域的尺寸-内容宽度和   内容高度-取决于以下几个因素：元素是否   生成设置了'width'或'height'属性的盒子，无论   该框包含文本框或其他框，无​​论该框是表格还是其他表格。

还有here：

  

此属性指定盒子的内容高度。

     

此属性不适用于未替换的嵌入式元素。见   computing heights and margins for non-replaced inline elements for the rules used instead上的部分。

如果检查上面的链接，我们可以阅读：

  

“ height”属性不适用。内容区域的高度   应基于字体，但此规范未指定   怎么样。 UA可以例如使用em-box或字体的最大升序和降序。

这里是一个插图，可以更好地向您显示 ^ref ：

内联元素的内容区域由em定义，如上图所示，无论行高如何，内容区域仅取决于字体属性。因此line-height定义行框的高度，内容区域的高度由字体属性定义。

真正的问题是：为什么默认情况下line-height不等于内容区域？

如果选中，我们选中the documentation，我们可以清楚地看到默认值设置为normal并且：

  

正常

     

取决于用户代理。桌面浏览器（包括Firefox）   使用大约1.2的默认值，具体取决于元素的   字体家族。

因此，浏览器将始终将行高设置为比解释间隙的内容区域高一些。

---

现在为什么将line-height设置为1不能解决问题？仅仅因为您设置了跨度的line-height而不是它们的容器的line-height，这是不够的。容器的line-height仍然是默认的1.2，因为它比1大。换句话说，最大的line-heiht将获胜。

这里有一些插图可以更好地理解：

主体的行高为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>

Answer 2

这是因为父容器的行高与跨度的不匹配-行高会影响子级，因此跨度是内联的，它遵循父级的行高

// From CSS spec:
// The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'. Boxes of child elements do not influence this height.

div {
  line-height: 1;
}
span {
  background-color: red;
  line-height: 1;
}

<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>