如何使边框底部更接近文本？

Question

我想使用边框底线作为链接(不是文本修饰下划线).但我需要让这条线更贴近文字.负填充是不可能的,所以我该怎么办？这是一个例子:

a {
  color: #245fc1;
  position: relative;
  border-bottom: 1px solid #245fc1;
  padding-bottom: 0px;
  text-decoration: none;
}

<a href="#">i want the line to be nearer</a> on the text
<bR/> because if i write in second line the bottom line from above is too close.
<bR/> using text-decoration: underline is not an option for me!

Answer 1

如果将链接设置为display:inline-block;,则可以设置较小的行高(小于1)并将底部边框移近文本:

a {
  color: #245fc1;
  display: inline-block;
  line-height: 0.7em;
  position: relative;
  border-bottom: 1px solid #245fc1;
  padding-bottom: 0px;
  text-decoration: none;
}

<a href="#">I want the underline to be closer</a> to the text<br/>because if I write in second line the bottom line from above is too close. <br/>using text-decoration: underline is not an option for me!