css - 使底部边框更靠近文本

Question

我想在我的导航菜单下划线，但问题是我需要它更粗，所以我使用底部边框来代替，这样我就可以将宽度设置为 6 像素。

我似乎可以弄清楚如何让边框看起来更靠近文本。目前文本和底部边框之间似乎有大约 10px 的间隙，我不想有任何间隙。

我试图定位另一个 div 并将其相对于每个 {li} 与 {bottom: 10px} 定位，但我似乎无法让它工作。

这是我所拥有的

代码

    <div id="menu">
    <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}

#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}

#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}

#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}

#menu ul li a:hover{
}

Answer 1

您可以混合使用 line-height 和 margin 来获得这样的效果，如下所示:

#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;
}