Html 更改跨度图元的高度

我试图通过将所选文本放在span元素中，然后给span一个彩色的底部边框来实现彩色下划线，如

border:bottom: 1px solid red;

这是可行的，但这条线太远了：

以下是整个跨度图元周围的边框：

有没有人找到一种方法来降低跨度元素的高度，从而使底部边框更接近单词

---

感谢内联元素没有高度，因此您可以将“显示”属性更改为类似于

内联块的属性，然后使用
行高
属性将边框移近：


span{
边框底部：1px纯红；
显示：内联块；
线高：10px；
}
是否有人找到了降低span元素高度的方法，以便底部边框更接近单词？
您也可以使用height


span{
边框底部：1px纯红；
显示：内联块；
线高：20px；
}
是否有人找到了降低跨度元素高度的方法，使底部边框更接近单词？
谢谢。这很管用，但并没有给我想要的彩色下划线。每个字体大小所需的实际高度值是不同的，以便将下划线放在它应该放在的位置，这将打开一个蠕虫罐头。因此，我现在只使用标准的黑色下划线。将高度更改为线条高度比高度完美更有意义<代码>行高：currentFontSize

有效。这就是解决办法！谢谢