Question 184091 in Html Question posted in
Some basic documentation can be found here.

Html – Why does <a> tag with an image change element dimensions?

I am trying to create a header for my website and I want to place clickable social media logos that can redirect the user to that link. I am pretty new to frontend so from what I understand I have to place an anchor tag around the image element for it to be a clickable link. However placing the tag changes the dimensions of the element itself.

This works fine: [image is in the center with dims 25×25] 

    <img 
      className='invert float-left' 
      src='/static/github.svg'
      height="25" 
      width="25"
      alt="github logo"
    />

However, this does not: [anchor element tag has dims 25×40 and thus offsets the image upwards] 

<a href="<URL>">
  <img 
    className='invert' 
    src='/static/github.svg'
    height="25" 
    width="25"
    alt="github logo"
  />
</a>
Tags:

2

Answers


  1. 0

    You should insert display: inline-flex; on the <a> tag.

    <a href="https://github.com/" style="
    display: inline-flex;
">
  <img height="25" width="25" src="https://cdn.pixabay.com/photo/2022/01/30/13/33/github-6980894_1280.png" alt="github">
</a>
    Login or Signup to reply.
  2. 0

    You can use this code, change the image or link as needed.

    <div style="display: flex; align-items: center; gap: 4px">
   <a href="link">
    <img
      className="invert"
      src="https://cdn4.iconfinder.com/data/icons/iconsimple- 
      logotypes/512/github- 
      512.png"
      height="25"
      width="25"
      alt="github logo"
    /> </a
  >Github
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search