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.
Cheers!
Top comments (5)
I tried to change some css and found a fix
Just add this rule in
common.css
You can change margin according to your needs
margin
is set to 0, as I stated in my post.I like the solution, but it seems a bit hacky; is this solution not prone to breaking/working differently on different devices?
I don't think so that it would break, It looked good on my every device.