Image in CSS nav bar

Question

ナビゲーションバーの最後のリンクとしてアイコンを追加しようとしています。

ul全体に余分なスペースが追加されていますが、画像が青色ギアを超えて1つのピクセルを拡張していないにもかかわらず、

余白、パディング、行の高さを0に設定しようとしましたが、それでもブロックが拡張されています。

ナビゲーションバー nav bar

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    font-family: sans-serif; 
} 

li { 
    float: left; 
} 

li a { 
    color: white; 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    padding: 14px 16px; 
} 

HTML

<ul class="menu"> 
    <li><a href="#">PRODUCTION</a></li> 
    <li><a href="#">OFFICE</a></li> 
    <li><a href="#">SALES</a></li> 
    <li><a href="#">MISC</a></li> 
    <li><a href="#">ADMIN</a></li> 
    <li><a href="#">GEAR</a></li> 
    <!--<li><a id="gear" href="#"><img src="gear.png"/></a></li> --> 
</ul> 

画像 Gear Image

Answer 1

あなたが簡単に確認画像を決して作らないために、このCSSルールに追加することができます行くその周りのテキストよりも大きい。

正確な画像ファイルなし

.menu img { 
    height:1em; 
} 

、私はより具体的な/エレガントな解決策を考え出すことはできません。

ここで働い例です：ギアが小さすぎる場合、その後、 http://codepen.io/anon/pen/LZRaWL

パッディングを減らし、ギアのサイズを大きくします。ここでは、em単位の相対サイズを利用した二次的な例を示します。 http://codepen.io/anon/pen/gMwEmj