html - 更改跨度元素的高度

Question

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

border:bottom: 1px solid red;

这行得通，但是该行在单词下面太远了:

这是整个 span 元素周围的边框:

有没有人看到一种方法可以降低 span 元素的高度，使底部边框更靠近单词？

谢谢

Answer 1

行内元素没有高度，所以可以把display属性改成inline-block之类的，然后用line-height属性移动边界更近:

span {
  border-bottom: 1px solid red;
  display: inline-block;
  line-height: 10px;
}

Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?