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样式如何不继承

回答

相关问题