页脚两个链接间出现奇怪线条，如何识别并消除？

这个问题本质是两个<a>标签之间的**空白字符（换行/空格）**被浏览器解析成了文本节点，哪怕这个节点是空的，链接的下划线样式还是会作用在这一小块空白上，就出现了你看到的蓝色小线条。

给你几个直接有效的解决办法：

方法1：消除a标签之间的空白 #

把两个<a>标签紧挨着写，中间不要留换行或空格：

<div id="footer-contact" class="col-5">
    <a href="mailto:exampleABCDEFG@outlook.com"><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>

方法2：用CSS消除父元素空白间距 #

给footer-contact容器设置font-size: 0，消除空白字符带来的间距，同时给a标签明确去掉下划线：

#footer-contact {
    font-size: 0;
}
#footer-contact a {
    text-decoration: none;
}

方法3：用Flex布局排列图片 #

给footer-contact容器用Flex布局，自动消除空白，还能灵活控制图片间距：

#footer-contact {
    display: flex;
    gap: 8px; /* 可按需调整图片之间的间距 */
}
#footer-contact a {
    text-decoration: none;
}

这几种方法都能解决问题，推荐用Flex布局，后续调整样式会更方便。

内容的提问来源于stack exchange，提问作者scoffin