An <a> tag with an <img> tag inside lines up differently that an <a> tag with just text. How can I fix this?

Question

I am working on a website, and I am trying to make a top navigation bar. The far left link should be an image with my logo, and the other ones should navigate to different parts of the site. The button with the image lines up differently that the other ones. How can I fix that?

 <div id='topbar'> <a href='index.html' class='topbar-button-home'> <img src='camelCaseCo_centered_cropped_notext_bold_small.png'> </a> <a href='index.html' class='topbar-button'>Home</a> <a href='index.html' class='topbar-button'>2</a> <a href='index.html' class='topbar-button'>3</a> <a href='index.html' class='topbar-button'>4</a> </div> <style> #topbar { padding: 0; margin: 0; display: inline-block; font-size: 0; } .topbar-button { width: 200px; margin: 0px; padding: 20px; display: inline-block; border: solid black 1px; border-radius: 0px; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } .topbar-button-home { width: 50px; margin: 0px; padding: 8px; border: solid black 1px; display: inline-block; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } </style> 

Thanks in advance!

Answer 1

What about Flexbox?

 #topbar { padding: 0; margin: 0; display: flex; } .topbar-button { width: 200px; margin: 0px; padding: 20px; display: inline-block; border: solid black 1px; border-radius: 0px; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } .topbar-button-home { width: 50px; margin: 0px; padding: 8px; border: solid black 1px; display: inline-block; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } 

 <div id='topbar'> <a href='index.html' class='topbar-button-home'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a> <a href='index.html' class='topbar-button'>Home</a> <a href='index.html' class='topbar-button'>2</a> <a href='index.html' class='topbar-button'>3</a> <a href='index.html' class='topbar-button'>4</a> <a href='index.html' class='topbar-button'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a> </div> 

In the example above, all flex children will have the same height regardless of their content.

Answer 2

Remember, images are inline elements and so they are affected by line height. Try setting your image to diasplay block or inline-block. I see you have it on the link— move it to the image.