如何使边框底部更接近文本? [英] How to get the border-bottom closer to the text?

问题描述

我想对链接使用边框底线(而不是文本装饰底线). 但是我需要使行距文本更近.负填充是不可能的，那我该怎么办?这是一个例子:

I want to use a border-bottom line for links (not text-decoration underline). But I need to get the line closer to the text. Negative padding isn't possible so what can I do? here is an example:

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!

推荐答案

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

If you set the links to display:inline-block;, you will be able to set a smaller line-height (smaller than 1) and move the bottom border closer to the text :

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!

这篇关于如何使边框底部更接近文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！