HTML CSSスタイル継承しない

Question

ロゴ付きナビゲーションメニューを表示する必要があります。ここでJSフィドルリンクhttps://jsfiddle.net/47Ls678d/

今、画像のロゴは、CSSから</>タグのプロパティを継承している問題であると私はトップ、左を削除することはできませんよ、ロゴイメージ用の下余白スペースがあります。

私はコード

<a style="margin:0px;" href="#" class="navbar-left"><img height="55" width="160" src="https://www.w3schools.com/html/pic_mountain.jpg"></a> 

でもない作業をして試してみました。

CSS： 本体{マージン：0;}

.topnav { 
    overflow: hidden; 
    background-color: #333; 
} 

.topnav a { 
    float: left; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 17px; 
} 

.topnav a:hover { 
    background-color: #ddd; 
    color: black; 
} 

.topnav .icon { 
    display: none; 
} 

HTML

<div class="topnav" id="myTopnav"> 
    <a href="#" class="navbar-left"><img height="55" width="160" src="https://www.w3schools.com/html/pic_mountain.jpg"></a> 
    <a href="#home">Home</a> 
    <a href="#news">News</a> 
    <a href="#contact">Contact</a> 
    <a href="#about">About</a> 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
</div> 

Answer 1

理由は、画像の親タグである "" タグがパディングを有することです。 このcssをコードに追加した場合、埋め込みは消えます。

a.navbar-left{padding:0px;margin:0px; font-size:0px;} 

希望すると、これが役立ちます。

Answer 2

このようなものをお探しですか？

#myTopnav { 
 
    height: 55px; 
 
} 
 

 
.topnav { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 18px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
.topnav a:nth-child(1) { 
 
    padding: 0 0; 
 
}

<div class="topnav" id="myTopnav"> 
 
    <a href="#"><img height="55px" width="160" src="https://www.w3schools.com/html/pic_mountain.jpg"></a> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
 
</div>