更改span元素的高度

Question

我正在尝试通过将所选文本放在span元素中然后为span设置一个彩色底部边框来实现彩色下划线，例如

border:bottom: 1px solid red;

这样可行，但这句话太过分了：

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

有没有人看到减少span元素高度的方法，以便底部边框更靠近单词？

由于

Answer 1

内联元素没有高度，因此您可以将显示属性更改为inline-block，然后使用line-height属性将边框移近：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您也可以使用身高。

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

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