вая этот 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/

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

<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?