Comment puis-je supprimer l'espace entre les éléments inline-block?

compte tenu du HTML et du CSS:

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

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

en conséquence, il y aura un espace de 4 pixels de large entre les éléments de portée.

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

je comprends pourquoi cela se produit, et je sais aussi que je pourrais me débarrasser de cet espace en supprimant l'espace blanc entre les éléments de portée dans le HTML code source, comme ceci:

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

cependant, j'espérais une solution CSS qui n'exige pas que le code source HTML soit trafiqué.

je sais comment résoudre cela avec JavaScript - en enlevant les noeuds de texte de l'élément conteneur (le paragraphe), comme ceci:

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

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

mais ce numéro être résolu avec CSS seul?