Как удалить пространство между элементами встроенного блока?

учитывая это HTML и CSS:

span {

    display:inline-block;

    width:100px;

    background-color:palevioletred;

}

<p>

    <span> Foo </span>

    <span> Bar </span>

</p>

в результате между элементами пролета будет 4 пикселя в ширину.

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

Я понимаю, почему это происходит, и я также знаю, что я мог бы избавиться от этого пространства, удалив пробел между элементами SPAN в исходном коде HTML, например:

<p>

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

</p>

тем не менее, я надеялся для решения CSS, которое не требует изменения исходного кода HTML.

Я знаю, как решить эту проблему с помощью JavaScript-путем удаления текстовых узлов из элемента контейнера (абзаца), например:

// jQuery

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

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

но может ли эта проблема быть решена только с помощью CSS?