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

Given this HTML and CSS:

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

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


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:

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

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();


But can this issue be solved with CSS alone?