Why tag in tag will have 4 px space on bottom?

Question

I am trying to put an image inside of as a logo link, but there is always a 4px space on the bottom. I know I can set height 50px for to solve the problem, but I want the height of is depend on the . So, my question are, where is 4px space come from? And How can I solve it?

Here is the code:

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

Here is the result(I do not want 4px space on the bottom):

Thanks Quentin this is a duplicate question, I am sorry about that. The answer is here "White space at bottom of anchor tag"

Because you didn't specify the position of your or elements, they are by default positioned top left. Position them with bottom : 0. — zoubida13, Aug 16 '17 at 15:09
I am sorry, I was not sure what you said. What about I want the and on top left? However, I tried to add `position:absolute; top:0; bottom:0; left:0` for but still does not work. Thank you. — Yode Zage, Aug 16 '17 at 15:17
@zoubida13 — Currently the element is position: static so that would do nothing. If you changed it to relative, it would still do nothing. If you changed it to anything else, it would move the image from the link and put it somewhere nonsensical. — Quentin, Aug 16 '17 at 15:26
Thank you for your answer, but I already find the answer "https://stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag%22". The reason is "The image is display: inline so it is treated like a character and sits on the baseline." However, still want to thank you for your answer. — Yode Zage, Aug 16 '17 at 15:34
@Quentin it was a suggestion to help him understand what is going on with the positioning defaults, not an answer. But thanks for your useful contributions. — zoubida13, Aug 16 '17 at 16:24

score 1 · Answer 1 · answered Aug 16 '17 at 15:21

1

try this: 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>

answered Aug 16 '17 at 15:21

North-Wind

156
1
12

Thank you for the answer, `display: flex;` works, but I would like to know why as well. However, Quentin told me my question is duplicate and I already find the answer on "https://stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag". But still want to thank you for your answer. – Yode Zage Aug 16 '17 at 15:24

Why tag in tag will have 4 px space on bottom?

1 Answers1