Dado este HTML e CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

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

Como resultado, haverá um espaço de 4 pixels de largura entre os elementos SPAN.

Demo: http://jsfiddle.net/dGHFV/

Entendo por que isso acontece e também sei que poderia me livrar desse espaço removendo o espaço em branco entre os elementos SPAN no código-fonte HTML, da seguinte forma:

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

No entanto, eu esperava uma solução CSS que não exija que o código-fonte HTML seja violado.

Eu sei como resolver isso com JavaScript - removendo os nós de texto do elemento contêiner (o parágrafo), da seguinte maneira:

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

Demo: http://jsfiddle.net/dGHFV/1/

Mas esse problema pode ser resolvido apenas com CSS?