なぜ<img>タグの<a>タグの下部に4ピクセルのスペースがありますか？

-1

ロゴリンクのように内部に画像を入れようとしていますが、下部には常に4pxのスペースがあります。私は問題を解決するために高さ50pxを設定できることを知っていますが、私は高さを欲しいです。だから、私の質問は、4pxスペースはどこから来たのですか？それをどうすれば解決できますか？ここでなぜ<img>タグの<a>タグの下部に4ピクセルのスペースがありますか？

はコードです：ここでは

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

申し訳ありませんが、私はあなたが言ったか分からなかった。左上にとを入れたいのですが？しかし、私は 'position：absolute;トップ：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ピクセルのスペースがありますか？

答えて

関連する問題