Css 使底部边框更靠近文本

我想给我的导航菜单加下划线，但问题是我需要加厚一些，所以我使用底部边框，这样我就可以将宽度设置为6px

我似乎能想出如何使边框看起来更接近文本。目前文本和底部边框之间似乎有10像素的间隙，我不想有任何间隙

我试图定位另一个div，并将其相对于每个{li}和{bottom:10px}进行定位，但似乎无法使其工作

这就是我所知道的

代码

尝试添加以下内容：

padding-bottom: 5px;

到

---

您可以混合使用

行高

和

边距

来获得这样的效果，如下所示：

#menu ul li a {
    border-bottom: 6px solid #000000;
    color: #000000;
    display: block;
    line-height: 50px;
    list-style-type: none;
    margin: 20px 0;
    text-decoration: none;
}

尝试（源俄语）文章方法（背景梯度和）

{字体大小：50%；边框底部：1px红色虚线；} a>span{字体大小：200%；行高：正常；}

---

的问题与原始问题类似。 答案如下：

---

上面的解决方案可能会帮助其他无法解决此问题的人

使用

显示：内联块与
边框底部
组合可能会导致一些奇怪的行为换行符，请参阅。或者，您可以使用
背景图像
和
背景位置
的组合，其优点是不接触显示值

a {
    text-decoration: none;
    position: relative;
    background-repeat: repeat-x;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
    background-position: left 15px;
}
a:hover { background: none; }

缺点是您可能必须为使用的每种字体大小定义背景位置

使用这种技术，您还可以从诸如g或y这样的后代中删除边界

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }

及



请参见
边距属性无法更改边框底部位置，因此

元素的高度将定义边框底部的位置

 #menu > ul > li > a {
      height: ;
 }

谢谢你的回复。我已经试过你建议的了，把它放在离文本更远的地方。试着把它设为负数。否定填充没有任何作用。这个链接已经失效了。你还记得解决方案吗？我发现在所有不同的选项中，使用背景图像是目前为止最好的。此外，通过使用em单位而不是像素，您不必担心字体大小。例如
背景位置：0 1.05em如果需要其他颜色，请转到。
<p>Зигварт считал <a><span>критерием истинности необходимость и&nbsp;общезначимость, для&nbsp;которых нет никакой опоры</span></a> в&nbsp;объективном мире.</p>

a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }

a {
    text-decoration: none;
    position: relative;
    background-repeat: repeat-x;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
    background-position: left 15px;
}
a:hover { background: none; }

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }

<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a>

 #menu > ul > li > a {
      height: ;
 }