html - 内部带有图像的 anchor 的高度比其余元素的高度更高

Question

我正在构建一个带有文本和图标的导航栏，并使用 hoover 更改背景颜色，但我对图标背景的高度有疑问。我希望它们与文本具有相同的高度，但我不知道为什么它们具有更大的背景。

This is the problem

如您所见，图标背景和文本背景之间存在细微差别。我找到了一个为图标添加负底边距的解决方案，但这样图标就不会居中。另一种可能的解决方案是为 anchor 添加高度，但在这种情况下文本不会居中。我不明白那个小空间， anchor 不会像调整文本那样根据图像自行调整，我不知道为什么。您知道解决此问题的更好方法吗？

这是我的导航栏的 HTML 和 CSS 代码:

nav
{
  font-family: 'Playfair Display', serif;
  width: 100%;
  margin: 0;
}

nav ul
{
  background-color: #343A40;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li
{
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right
{
  float: right;
}


ul.topnav li a
{
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  min-height: 17px;
}

ul.topnav li a.active
{
  background-color: #00B5FF;
}

ul.topnav li a:hover
{
  background-color: #00B5FF;
}

ul.topnav li a img.icon
{
  margin: 0;
  vertical-align: middle;
  width: 30px;
  height: 30px;
}

<nav>
      <ul class="topnav">
        <li><a class="active" href="index.html"><img class="icon" src="images/home.png" alt="icon"></a></li>
        <li><a href="acerca.html">Acerca</a></li>
        <li><a href="portafolio.html">Portafolio</a></li>
        <li class="topnav-right"><a href="https://github.com/BernardoAyala"><img class="icon" src="images/github.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.linkedin.com/in/bernardo-ayala-94630216a/"><img class="icon" src="images/linkedin.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.instagram.com/bernardoayalam/"><img class="icon" src="images/instagram.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://twitter.com/Bernardo_Ayala"><img class="icon" src="images/twitter.png" alt="icon"></a></li>
      </ul>
    </nav>

Answer 1

图像是导致您的导航栏比应有的更长的原因。一种简单的方法是在悬停时为导航栏指定一个高度，使其与未悬停的导航栏相同。

nav
{
  font-family: 'Playfair Display', serif;
  width: 100%;
  margin: 0;
}

nav ul
{
  background-color: #343A40;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li
{
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right
{
  float: right;
}


ul.topnav li a
{
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  min-height: 17px;
}

ul.topnav li a.active
{
  background-color: #00B5FF;
}

ul.topnav li a:hover
{
  background-color: #00B5FF;
  height:20px;
}

ul.topnav li a img.icon
{
  margin: 0;
  vertical-align: middle;
  width: 30px;
  height: 30px;
}

<nav>
      <ul class="topnav">
        <li><a class="active" href="index.html"><img class="icon" src="images/home.png" alt="icon"></a></li>
        <li><a href="acerca.html">Acerca</a></li>
        <li><a href="portafolio.html">Portafolio</a></li>
        <li class="topnav-right"><a href="https://github.com/BernardoAyala"><img class="icon" src="images/github.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.linkedin.com/in/bernardo-ayala-94630216a/"><img class="icon" src="images/linkedin.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.instagram.com/bernardoayalam/"><img class="icon" src="images/instagram.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://twitter.com/Bernardo_Ayala"><img class="icon" src="images/twitter.png" alt="icon"></a></li>
      </ul>
    </nav>