Question

I’m working on a navigation menu, and have created a containing four anchor tags, as below:

 <nav>
<ul>
        <li><a href="/" class="active">BLOG</a></li>
        <li><a href="/about/">ABOUT ME</a></li>
        <li><a href="/portfolio/">PORTFOLIO</a></li>
        <li><a href="/contact/" class="highlight">CONTACT</a></li>
    </ul>
 </nav>

I’ve set a top border of 10px for each link, which I want to sit tight on top of the text. Despite setting padding to 0 in all the right places, I can’t get rid of the padding. I’ve tried changing line height but this just moves the whole nav section up or down the screen, and doesn’t affect the gap between the anchor text and the top border.

Here’s the CSS (not including CSS resets etc, which I can post if needed, but these mostly came from HTML5BoilerPlate.

nav ul {
        padding-right: 24px;
        float: right;
    }

    nav li {
        display: inline;
        font-family: Oswald;
        font-size: 25px;
    }

    nav a {
        color: #7a7a7a;
        text-decoration: none;
        margin-left: 16px;  
    }

    nav li a {
        border-top: 10px solid #7a7a7a; 
    }

    nav a:hover {
        color: #555555
    }

    nav a.active {
        color: #555555;
    }

    nav a.highlight:hover { 
        color: #1f9c66;
    }

    a.highlight {
        color: #29cf86;
    }

Can anyone help? Thanks.

Answer 1

You could translate the anchors a few pixels up via relative positioning:

li {
    display: inline;
    margin-left: 16px;  
    border-top: 10px solid #7a7a7a;
}

a {
    position: relative;
    top: -6px;
}

Live demo: http://jsfiddle.net/XQK9h/