 <p>It's because you set the <code>display:block</code> for your <code>a</code>, so the border will be around the box (which has <code>height</code> set to <code>46px</code>). Looks like you explicitly set <code>padding-bottom</code> to <code>0</code> and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the <code>line-height</code> to be equal to the <code>height</code> (both are <code>46px</code>), so the text is centered vertically and give a space between the baseline and the border-bottom. </p> <p>To solve this problem, simply remove the line <code>display: block;</code> in your css for the <code>a</code> tag. You don't need that at all, removing will solve your problem:</p> <pre><code>#menu ul li a { text-decoration:none; color:#ccc; margin-right:5px; height:46px; line-height:46px; padding:0 5px 0 5px; font-size:20px; } </code></pre>