埋め込みがすでにゼロになっているときのアンカーテキストと境界線の間のスペースを削除するにはどうすればよいですか？

Question

以下のように私は、ナビゲーションメニューに取り組んでいる、と含む4個のアンカータグを作成している：私はタイトに座るしたい各リンクのための10pxのの上部の境界線を設定している

<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> 

テキストの上部。すべての適切な場所でパディングを0に設定したにもかかわらず、パディングを取り除くことはできません。私は線の高さを変更しようとしましたが、これはナビゲーションセクション全体を画面の上下に動かし、アンカーテキストと上の境界線の間のギャップには影響しません。

は、ここで（必要であれば、私は投稿できるCSSのリセットなどを含めていないCSSのですが、これらは主に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; 
    } 

誰が助けることはできますか？ありがとう。

Answer 1

あなたはアンカーを翻訳でき相対的な位置を経由して、最大数ピクセル：

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

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

ライブデモ：http://jsfiddle.net/XQK9h/

Answer 2

私はそれがあなたを助けると思います。すべてのWebブラウザでマージン&パディングを削除しますアンカーフロートを設定

<style type="text/css"> 

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

nav div { 
    border-top: 10px solid green; 
    display: block; 
    float: left; 
    font-family: Oswald; 
    font-size: 25px; 
    height: 10px; 
    margin: 10px; 
} 

nav a { 
    color: #7a7a7a; 
    text-decoration: none; 
} 

nav a:hover { 
    color: #555555 
} 

nav a.active { 
    color: #555555; 
} 

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

a { 
    position: relative; 
    top: -3px; 
} 
a.highlight { 
    color: #29cf86; 
} 

</style> 

<nav> 
<ul> 
    <div><a href="/" class="active">BLOG</a></div> 
    <div><a href="/about/">ABOUT ME</a></div> 
    <div><a href="/portfodivo/">PORTFOLIO</a></div> 
    <div><a href="/contact/" class="highdivght">CONTACT</a></div> 
</ul> 
</nav> 

Answer 3

。

#container li a { 
    float:left; 
}