html - 减少链接的边框

Question

简要 - 我需要缩小文本和边框之间的间距。

它的样子:

它需要看起来像什么:

HTML -

<div class="navigation">
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>

CSS -

a { font: 36px 'Bebas Neue', Arial, Sans-Serif; color: #fff; text-decoration: none; }
a:hover { color: #d5a72b; border-top: 3px solid #d5a72b; border-bottom: 3px solid #d5a72b; border-spacing: 0; }
a.active { color: #d5a72b; border-top: 3px solid #d5a72b; border-bottom: 3px solid #d5a72b; }

Answer 1

您可以使用 line-height 属性和 padding 来做到这一点。在这种情况下，您需要调整 line-height:

line-height: 10px;

演示:http://jsfiddle.net/Y6Dj3/1/