看看下面的 fiddle :
当您的图像包含包含在 anchor /链接中的文本时，代码中图像和文本之间的空白会在渲染页面中的文本之前创建一个带下划线的空白。
当没有图像时，即使代码中有空格，也没有带下划线的空格。
我能避免这种带下划线的空白的唯一方法是消除代码中的空白。但我讨厌改变我的编码风格以改变呈现页面的呈现方式。无论如何，改变您的 HTML 以操纵页面的呈现无论如何都是错误的。这就像使用换行符 ( <br/> ) 在元素之间添加空格而不是使用 CSS。
是否有一个对我来说不太明显的 CSS 属性用于解决此问题？
更新 出于某种原因，人们越来越关注我在代码中的图像边框和边距。我只是把它们放在那里让它看起来不错。它们与问题无关，所以我删除了它们并更新了 fiddle ，以便人们可以更清楚地了解问题所在。
最佳答案
您可以像这样为 a 元素设置 CSS:
a {
display: inline-block;
}
关于html - 如何在不改变编码风格的情况下避免空白 anchor 下划线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10196545/