如何删除内联块元素之间的空格？

Question

鉴于此HTML和CSS：

span {

    display:inline-block;

    width:100px;

    background-color:palevioletred;

}

<p>

    <span> Foo </span>

    <span> Bar </span>

</p>

结果，SPAN元件之间将存在4像素宽的空间。

演示： http ：//jsfiddle.net/dGHFV/

我理解为什么会发生这种情况，而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间，如下所示：

<p>
    <span> Foo </span><span> Bar </span></p>

但是，我希望CSS解决方案不要求HTML源代码被篡改。

我知道如何用JavaScript解决这个问题 - 通过从容器元素（段落）中删除文本节点，如下所示：

// jQuery$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示： http ：//jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

Answer 1

在元素之间添加注释以不具有空格。对我来说，比将字体大小重置为零然后重新设置更容易。<div>&nbsp; &nbsp; Element 1</div><!----><div>&nbsp; &nbsp; Element 2</div>