html - 为什么<a>标签中的<img>标签底部会有4 px的空间？

This question already has answers here:

White space at bottom of anchor tag

                                    （3个答案）


                                2年前关闭。


我正在尝试将图像内部放置为徽标链接，但底部始终有4px的空间。我知道我可以将高度设置为50px来解决该问题，但是我希望高度取决于。所以，我的问题是4px的空间从哪里来？我该如何解决呢？

这是代码：

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <style>
      body{
        margin: 0;
        padding: 0;
      }

      nav{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
        z-index: 10;
      }

      a{
        text-decoration: none;
        color: black;
      }
    </style>
  </head>

  <body>
    <nav>
      <a href="#"><img src="Logo.png" alt="Logo" width="50" height="50"></a>
    </nav>
  </body>
</html>

结果如下（我不希望在底部有4px的空间）：

html - 为什么<a>标签中的<img>标签底部会有4 px的空间？-LMLPHP

谢谢昆汀，这是一个重复的问题，对此我感到抱歉。答案在这里“ White space at bottom of anchor tag”

最佳答案

试试这个：display:flex

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <style>
      body{
        margin: 0;
        padding: 0;
      }

      nav{
        position: fixed;
        width:100%;
        background: rgba(0,0,0,0.5);
        z-index: 10;
      }
      a{
        text-decoration: none;
        color: black;
        display:flex;
      }
    </style>
  </head>

  <body>
    <nav>
      <a href="#"><img src="Logo.png" alt="Logo" width="50" height="50"></a>
    </nav>
  </body>
</html>

关于html - 为什么<a>标签中的<img>标签底部会有4 px的空间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45717188/