There's a weird line between two links in my footer. What is it and how do I get rid of it?-CodePudding

Screenshot: Small line appearing between footer images

No matter what I do to the HTML and CSS, this little underline or underscore (see image) is appearing between the images in my footer. It's blue, so it looks like it may be part of the link somehow (even though I changed the color and decoration of links in the CSS). If I remove either image, it disappears. If the images stack on top of each other (e.g., if I make them block level), it disappears. I want both images sitting next to each other, though.

I've tried the following:

Using vanilla CSS and Bootstrap
Restructuring the footer HTML Putting a text-decoration:none rule on the links
Putting a text-decoration:none rule on the links
Putting a box-shadow:none rule on the links (as suggested in this StackOverflow post)

Here's the footer HTML:

<div id="footer" >
    <div id="site-copyright" >
        <small>© ABCDEFG, 2022</small>
    </div>
    <div id="footer-contact" >
        <a href="mailto:[email protected]">
            <img src="https://via.placeholder.com/25" alt="email me">
        </a>
        <a href="https://www.linkedin.com/in/ExampleABCDEFG">
            <img src="https://via.placeholder.com/25" alt="visit LinkedIn profile">
            </a>
    </div>
</div>

CodePudding user response：

It doesn't happen here when I add display:inline-block. As a general rule, don't trust inline styles. Use your own float and margin when you need to.

#footer-contact a {
  display: inline-block;
}

<div id="footer" >
  <div id="site-copyright" >
    <small>© ABCDEFG, 2022</small>
  </div>
  <div id="footer-contact" >
    <a href="mailto:[email protected]">
      <img src="https://picsum.photos/id/237/200/80" alt="email me">
    </a>
    <a href="https://www.linkedin.com/in/ExampleABCDEFG">
      <img src="https://picsum.photos/id/137/200/80" alt="visit LinkedIn profile">
    </a>
  </div>
  <div id="footer-contact2" >
    <a href="mailto:[email protected]">
      <img src="https://picsum.photos/id/237/200/80" alt="email me">
    </a>
    <a href="https://www.linkedin.com/in/ExampleABCDEFG">
      <img src="https://picsum.photos/id/137/200/80" alt="visit LinkedIn profile">
    </a>
  </div>  
</div>

CodePudding user response：

I could've helped better if I had more of your code. But, from what you've told, I think it has something to do with footer-contact div. Try removing its border, background, box-shadow etc.

CodePudding user response：

just add text-decoration:none to your <a> tags. Much more helpful when you supply a working snippet

a{
text-decoration:none;
}

<div id="footer" >
    <div id="site-copyright" >
        <small>© ABCDEFG, 2022</small>
    </div>
    <div id="footer-contact" >
        <a href="mailto:[email protected]">
            <img src="https://via.placeholder.com/25" alt="email me">
        </a>
        <a href="https://www.linkedin.com/in/ExampleABCDEFG">
            <img src="https://via.placeholder.com/25" alt="visit LinkedIn profile">
            </a>
    </div>
</div>