HTML CSS樣式如何不繼承

-2

我需要顯示帶有徽標的導航菜單。這裏是JS小提琴鏈接https://jsfiddle.net/47Ls678d/HTML CSS樣式如何不繼承

現在的問題，圖像標誌是繼承了CSS的</A>標籤屬性，我不能夠在去除頂部，左側，和標誌圖像的下邊距。

我曾嘗試與代碼

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

來源

2017-03-10 CodeDezk

其填充不保證金 – linktoahref

由於該解決的問題。 – CodeDezk

的原因是，「A」標記，是圖像的父標籤具有填充。如果您已將此css添加到您的代碼中，填充將會消失。

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

希望這會對你有幫助。

來源

2017-03-10 12:18:56

你在找這樣的事嗎？

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

來源

2017-03-10 12:28:13

HTML CSS樣式如何不繼承

回答

相關問題