如何删除inline-block元素之间的空格？

给定这个 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/
我知道为什么会出现这种情况，我也知道可以通过删除 HTML 源代码中 SPAN 元素之间的空白来消除这种空白，如下所示:

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

然而，我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。
我知道如何用 JavaScript 来解决这个问题——通过从容器元素(段落)中移除文本节点，如下所示:

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

演示: http://jsfiddle.net/dGHFV/1/

但是这个问题能单独用 CSS 解决吗？

实际的问题是:
如何删除内联块元素之间的空间？ 我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。 这个问题能单独用 CSS 解决吗？
单独使用 CSS 是可以解决这个问题的，但是没有完全给力的 CSS 修复程序。
作为一个经验丰富的开发者，我实际上是这样做来解决这个问题的:

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

是的，没错。 我删除了 HTML 中内联块元素之间的空白。
真的很简单。管用！务实！
有时候你必须仔细考虑空格从哪里来。 用 JavaScript 追加另一个元素会增加空格吗？ 不，如果你做得好就不会。
让我们用一些新的 HTML 代码，通过不同的方式来移除空格，让我们开始一段神奇的旅程:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li></ul>

你可以这样做，就像我通常做的:

<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

或者，这个:

<ul>
    <li>Item 1</li
    ><li>Item 2</li
    ><li>Item 3</li></ul>

或者，使用评论:

<ul>
    <li>Item 1</li><!--
    --><li>Item 2</li><!--
    --><li>Item 3</li></ul>

或者，如果你正在使用 PHP 或类似的工具:

<ul>
    <li>Item 1</li><?
    ?><li>Item 2</li><?
    ?><li>Item 3</li></ul>

或者，你甚至可以完全跳过某些结束标签(所有浏览器都可以这样做) :

<ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3</ul>

现在我已经用多种方法删除空格
或者，你现在可以使用 flexbox 来实现以前使用内联块来实现的布局

这还不容易？
在元素之间添加注释以避免空白。 对我来说，这比将字体大小重置为零然后再设置回来要容易得多。

<div>
    Element 1</div><!--
--><div>
    Element 2</div>