爲什麼<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的空間？

回答

相關問題