我正在使用图像标签中的一个图标作为我的LinkedIn的链接，另一个作为我的Github的链接。每个图标都位于锚点标记内。
当代码如下时：
<a href="temp.html" target="_blank">
<img src="linkedinicon.png">
</a>
<a href="https://github.com/victoriensukarieh" target="_blank" title="Github">
<img src="files/img/githubicon.png" height="30px" width="30px" style="border: none;">
</a>
浏览器显示一个"_"并且在开发者工具中；空白"；。
这样格式化代码解决了问题：
<a href="temp.html" target="_blank"><img src="linkedinicon.png"></a>
<a href="https://github.com/victoriensukarieh" target="_blank" title="Github">
<img src="files/img/githubicon.png" height="30px" width="30px" style="border: none;">
</a>
这个问题可以在这里看到JSFiddle
有人知道为什么吗？
这是因为你的链接有下划线样式，从技术上讲，你确实有空白。
element.style {
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
这并不是一个真正的bug，但它与之接壤。基本上，你想覆盖链接样式以使用text-decoration: none;，这应该不会成为问题。您可能需要覆盖所有状态，如：已访问和：悬停等。
解决方案：<a style="text-decoration: none;">...</a>
这不是默认的锚点下划线样式吗？
只是应用风格：
a {
text-decoration: none;
}
请确保此样式的优先级高于默认样式！
更多信息：https://www.hongkiat.com/blog/css-priority-level/
这是空白处理规则的结果(https://www.w3.org/TR/css-text-3/#white-空间处理(。
这些规则让图像变得有点奇怪，因为在某些方面，它们被当作inline，而在其他方面，它们又被当作inline-block。换行符、制表符等是空白字符，通常会被忽略或压缩，这样网页的元素就不会受到用于使代码可读的格式的影响(比如缩进和换行，就像您在示例中所做的那样(。然而，这里发生的是内联元素的空白规则本质上是将任何空白区域(空白字符组(折叠到一个空间，而不是完全删除它。
这里出现这种情况的原因之一是，该元素是一个内联元素，但在语义上更像是一个块或flex元素。如果将display:block应用于a元素，则行为可能会更接近您想要的内容，但这也意味着您需要一些额外的布局样式(float、flex等(，以使它们再次并排显示。就我个人而言，如果这是一组图标按钮/链接，我会将它们封装在语义正确的元素(div、list、nav等(中，并将display:flex应用于新的父级。