How can I remove the "padding"-like stuff on the `<a>`?

So, my website, on the homepage, has a "badge" that is fit to the container:

This is how it is set up:

<nav id="banner">
  <img type="image/png" alt="[Image of Katty.]" src="/assets/images/Katty/emblem.png"/>
  <!-- [...] -->
</nav>

However, on subpages, like /projects/index.html (https://calinzbaenen.github.io/projects/), there is some blank space between the "badge" and the end of the "banner":

This is how it is set up:

<nav id="banner">
  <a draggable="false" tabindex="-1" href="/">
    <img type="image/png" alt="[Image of Katty.]" src="/assets/images/Katty/emblem.png"/>
  </a>
  <h1>Projects</h1>
</nav>

From one of my stylesheets, I already have margin and padding set to 0 for them; their size is also fit-content.
ChatGPT recommended I make the <a> a display:block; element; I tried that, and it did not work. After I reported that, ChatGPT recommended I make the <a> have display:inline-block; and the <img> display:block;; after that did not work, I stopped trying to consult the AI.

I'm using Firefox 113.0.1 (64-bit) on Ubuntu x86_64.

Thanks in advance!
Cheers!

Comments

[Adzy]

I tried to change some css and found a fix
Just add this rule in common.css

#banner > a {
    text-decoration: none;
    color: #000000;
    margin-bottom: -5px;
}

[Adzy]

You can change margin according to your needs

[Calin Baenen]

margin is set to 0, as I stated in my post.

[Calin Baenen]

I like the solution, but it seems a bit hacky; is this solution not prone to breaking/working differently on different devices?

[Adzy]

I don't think so that it would break, It looked good on my every device.