Question

我需要显示带徽标的导航菜单。这是JS Fiddle链接https://jsfiddle.net/47Ls678d/

现在的问题是，图片徽标继承了css中的＆lt; / a ＆gt; 标记属性，我不是能够删除徽标图像的顶部，左侧和底部边距空间。

我尝试过代码

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

但不行。

的CSS： body {margin：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

原因是作为图像父标记的“a”标记具有填充。如果您已将此css添加到代码中，则填充将消失。

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

希望这会对你有所帮助。

Answer 2

你在找这样的东西吗？

＆＃13;

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

＆＃13;

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

＆＃13;

HTML CSS样式如何不继承

2 个答案: