Css 与跨度不同的高度

我有一个问题，div的高度与它下面的跨度不匹配：

:

大文本

---

innerDiv的高度为91，这是正确的（68.56 x 1.33=91.19）。但跨度的高度是86。我不知道高度是从哪里来的。我有一个HTML->SVG转换器，除了在一些像这样的边缘情况下，它大部分都可以工作。我只需要了解这种差异的来源，以便在计算中处理。

问题在于

span

元素是一个内联元素。对于这些实例，将

span

更改为和

inline块

显示：

span {
display:inline-block;
}

这里有更多的阅读：

以下是最新的小提琴：

---

问题在于

span

元素是一个内联元素。对于这些实例，将

span

更改为和

inline块

显示：

span {
display:inline-block;
}

这里有更多的阅读：

以下是最新的小提琴：

---

如果将

div

的行高更改为1，您将看到它不会影响

span

的高度

---

之所以会出现这种情况，是因为像

span

这样的内联元素只需要占用所需的空间即可渲染它们。

如果将

div

的行高更改为1，您将看到它不会影响

span

的高度

---

之所以会出现这种情况，是因为像

span

这样的内联元素只需要占用所需的空间来渲染它们。

好的，那么86作为高度的来源是什么呢？它似乎与输入的字体大小无关。字体仍然具有固有的行高（前导）。如果您在web检查器中查看边界框，您可以看到文本上方的空格，它的结尾正好在下一个空格下方（在您的示例中，g是大的）。如果字体没有将此作为字体规范的一部分，则行将一起运行。将字体改为Arial，看看我的意思。好的，那么86的高度从哪里来？它似乎与输入的字体大小无关。字体仍然具有固有的行高（前导）。如果您在web检查器中查看边界框，您可以看到文本上方的空格，它的结尾正好在下一个空格下方（在您的示例中，g是大的）。如果字体没有将此作为字体规范的一部分，则行将一起运行。将字体改为Arial，看看我的意思。