如何避免空格锚下划线没有改变编码风格？

Question

看看以下小提琴:

http://jsfiddle.net/DNhAk/14/

当您有一个包含在锚/链接中的文本的图像时,图像和代码中的文本之间的空白在文本之前的呈现页面中创建带下划线的空白.

当没有图像时,即使代码中有空格,也没有带下划线的空格.

我能看到避免这个带下划线的空格的唯一方法就是消除代码中的空格.但我讨厌改变我的编码风格,以改变呈现页面的呈现方式.无论如何,改变你的HTML以操纵页面的呈现是错误的.这就像使用换行符(<br/>)在元素之间添加空格而不是使用CSS.

是否有一个不太明显的CSS属性用于解决此问题？

更新 由于某些原因,人们会挂在我在代码中的图像边框和边距上.我只把它们放在那里让它看起来不错.它们与问题无关,因此我删除了它们并更新了小提琴,以便人们可以更清楚地了解问题所在.

Answer 1

您可以a像这样设置元素的CSS :

a {
    display: inline-block;
}

Answer 2

您可以使用一些CSS模拟效果:

img {
    border: 1px solid #CCC;
    padding: 10px;
    vertical-align: middle;
    float:left;
}

a {
    display:block;
    height:70px;
    line-height:70px;
}

http://jsfiddle.net/DNhAk/8/