DEV Community

Calin Baenen
Calin Baenen

Posted on

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:
[Image of my homepage.]

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>
Enter fullscreen mode Exit fullscreen mode

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":
[Image of the Projects section of my website.]

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (5)

Collapse
 
foxy4096 profile image
Foxy4096 • Edited

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;
}
Enter fullscreen mode Exit fullscreen mode

Image of Calin Baenen Project Page

Collapse
 
foxy4096 profile image
Foxy4096

You can change margin according to your needs

Collapse
 
calinzbaenen profile image
Calin Baenen

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

Collapse
 
calinzbaenen profile image
Calin Baenen

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

Collapse
 
foxy4096 profile image
Foxy4096 • Edited

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