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

-1

我试图把一个图像作为一个标识链接，但底部总是有一个4px的空间。我知道我可以设置高度为50px来解决问题，但我想要的高度取决于。所以，我的问题是，4px空间来自哪里？我该如何解决它？为什么<img>标签在<a>标签的底部会有4 px的空间？

下面是代码：

<!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空间）：

由于昆汀这是一个重复的问题，我感到很抱歉那。答案就在这里“White space at bottom of anchor tag”

来源

2017-08-16 Mrister_Alfred

因为你没有指定或元素的位置，他们在默认情况下位于左上角。将它们放在底部：0. – zoubida13

我很抱歉，我不确定你说的是什么。那么我想要左上角的和？但是，我试图添加'位置：绝对;顶部：0;底部：0;左：0'为，但仍然不起作用。谢谢。 –

@ zoubida13 - 目前元素是position：static，所以什么也不做。如果您将其更改为相对，它仍然无能为力。如果您将其更改为其他任何内容，则会将链接中的图像移动到某个无意义的地方。 – Quentin

试试这个：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>

来源

2017-08-16 15:21:03

谢谢你的回答，'display：flex;'有效，但我想知道为什么。但是，Quentin告诉我我的问题是重复的，我已经在“https://stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag”上找到了答案。但还是要感谢你的回答。 –

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

回答

相关问题