Html 为什么线框之间有空格，而不是因为半导通？

在下面的代码示例中，您将看到垂直流动的

跨度之间的空白。每个行框之间都有空白

我想首先指出，这与
内联块
框之间的间隙无关，甚至与的结果无关，在计算最小线高度时，这些间隙会添加到内联标高框的顶部和底部

从：

内联框的高度包含所有图示符及其位置
两边各有一半的引线，因此正好是“线高度”

以及：

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

注意事项：


背景色
（如下图所示）覆盖了整行框
尽管如此，每个行框之间仍然有空白
我不是在要求一个解决办法来消除这一差距。如果我想这样做，我只需在
span

为什么会有这样的差距，其基础是。规范的哪一部分解释了间距

示例代码：


//来自CSS规范：
//内联框的高度包含所有图示符及其每侧的半前导，因此正好是“线高度”。子元素框不影响此高度。
span{
背景色：红色；
线高：1；
}
有些跨度。如图所示，背景覆盖字体加上顶部/底部的一半前导。还有一个差距，这是由于其他原因造成的。
一些跨度。如图所示，背景覆盖字体加上顶部/底部的一半前导。仍然存在一个间隙，这是由于其他原因造成的。
这是因为父容器的线高度与跨度的线高度不匹配-线高度影响子容器，因此跨度是内联的，它遵守父容器的线高度


//来自CSS规范：
//内联框的高度包含所有图示符及其每侧的半前导，因此正好是“线高度”。子元素框不影响此高度。
div{
线高：1；
}
跨度{
背景色：红色；
线高：1；
}

一些跨度。如图所示，背景覆盖字体加上顶部/底部的一半前导。还有一个差距，这是由于其他原因造成的。
一些跨度。如图所示，背景覆盖字体加上顶部/底部的一半前导。仍然存在差距，这是由于其他原因造成的。
这是因为父容器的线条高度与span的不匹配-线条高度影响子容器，因此span是内联的，它遵守父容器的线条高度


//来自CSS规范：
//内联框的高度包含所有图示符及其每侧的半前导，因此正好是“线高度”。子元素框不影响此高度。
div{
线高：1；
}
跨度{
背景色：红色；
线高：1；
}

一些跨度。如图所示，背景覆盖字体加上顶部/底部的一半前导。还有一个差距，这是由于其他原因造成的。
一些跨度。如图所示，背景覆盖字体加上顶部/底部的一半前导。仍然存在差距，这是由于其他原因造成的。
背景属性仅适用于内容区域，而不适用于行框。在大多数情况下，内容区域由
高度定义。正如我们所看到的：

方框内容区域的尺寸-内容宽度和宽度
内容高度-取决于几个因素：元素是否
生成框具有“宽度”或“高度”属性集，无论
该框包含文本或其他框，无论该框是表格等

以及：

此属性指定框的内容高度

此属性不适用于未替换的内联元素。见
关于的章节

如果查看上述链接，我们可以阅读：

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

以下是一个更好地向您展示的示例：


内容区域由浏览器定义，在某些情况下，它可以是上图中所示的
em
1，但不是必需的

在所有情况下，无论
行高是多少，内容区都只取决于字体属性。因此，
行高
定义行框的高度，内容区高度由字体属性定义

所以真正的问题是：为什么默认情况下，
行高度
不能使行框与内容区域相等

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

正常的

取决于用户代理。桌面浏览器（包括Firefox）
根据元素的属性，使用大约1.2的默认值
字体系列

然后

（无单元）

使用的值是这个无单位的
乘以元素自身的字体大小

在某些情况下，我们的行框会比解释差距的内容区域大一点。1


现在为什么将
行高度设置为
1
不能解决问题

仅仅因为您设置了跨度的
线高
，而不是其容器的
线高
，这是不够的。集装箱的
线高度
仍然是默认值
1.2
，因为它大于
1
。换句话说，最大的
行高将获胜

以下是一些更好理解的示例：

车身的线条高度为
2
，并且只有一个大的