DEV Community

Calin Baenen
Calin Baenen

Posted on

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

#webdev #help #html #css

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
Aditya • • 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
Aditya •

You can change margin according to your needs

Collapse
 
baenencalin profile image
Calin Baenen •

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

Collapse
 
baenencalin 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
Aditya • • Edited

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

Read next

husain01 profile image

Securing Next.js Applications with Robust CSP Headers

Husain Bhagat -

r4nd3l profile image

HTML input types

Matt Miller -

vishnusatheesh profile image

Controlled and Uncontrolled components in react

Vishnu Satheesh -

yogini16 profile image

Kafka vs. RabbitMQ: Which is the Right Messaging Broker for your use case?

yogini16 -