How do I remove the space between inline-block elements?

Given this HTML and CSS:

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

Foo Bar

As a result, there will be a 4 pixel wide space between the SPAN elements.

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

I understand why this happens, and I also know that I could get rid of that space by removing the white-space between the SPAN elements in the HTML source code, like so:

Foo Bar

However, I was hoping for a CSS solution that doesn’t require the HTML source code to be tampered with.

I know how to solve this with JavaScript – by removing the text nodes from the container element (the paragraph), like so:

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

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

But can this issue be solved with CSS alone?