鉴于此 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>但是，我希望 CSS 解决方案不要求 HTML 源代码被篡改。
我知道如何用 JavaScript 解决这个问题 - 通过从容器元素（段落）中删除文本节点，如下所示：
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();演示： http ： //jsfiddle.net/dGHFV/1/
但是这个问题可以单独用 CSS 解决吗？
由于这个答案已经变得相当流行，我正在重写它。
我们不要忘记提出的实际问题：
如何删除内联块元素之间的空格？我希望 CSS 解决方案不要求 HTML 源代码被篡改。 只用 CSS 就能解决这个问题吗？
它可以解决这个问题单独 CSS，但目前还没有完全强大的 CSS 修复。
我在初始答案中的解决方案是将font-size: 0添加到父元素，然后在子元素上声明一个合理的font-size 。
http://jsfiddle.net/thirtydot/dGHFV/1361/
这适用于所有现代浏览器的最新版本。它适用于 IE8。它在 Safari 5 中不起作用，但它在 Safari 6 中有效. Safari 5 几乎是一个死的浏览器（ 0。33％，2015 年 8 月 ）。
相对字体大小的大多数可能问题并不复杂。
然而，虽然这是一个合理的解决方案，如果你特别需要一个 CSS 修复，如果你可以自由更改你的 HTML（我们大多数人都是），这不是我的建议。
这是我作为一个经验丰富的 Web 开发人员实际上解决这个问题的方法：
<p>
<span>Foo</span><span>Bar</span>
</p>恩，那就对了。我删除了 inline-block 元素之间 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>现在我已经走了，用 “千种不同的方法去除空白，通过 thirtydot” 让你无聊，希望你已经忘记了所有关于font-size: 0 。
或者，您现在可以使用 flexbox来实现许多以前使用内联块的布局： https ： //css-tricks.com/snippets/css/a-guide-to-flexbox/
对于符合 CSS3 标准的浏览器，存在white-space-collapsing:discard
请参阅： http ： //www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
好的，虽然我已经投了两个font-size: 0;并且not implemented CSS3 feature答案，经过尝试我发现它们都不是真正的解决方案 。
实际上，没有强烈的副作用，甚至没有一种解决方法。
然后我决定从我的HTML源代码（ JSP ）中删除 inline-block div 之间的空格 （这个答案是关于这个参数的），转而：
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>对此
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>这是丑陋的，但工作。
但是，等一下...... 如果我在Taglibs loops生成我的 div（ Struts2 ， JSTL等等）会怎么样？
例如：
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>内联所有内容绝对不可思议，这意味着
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>这是不可读的，难以保持和理解等等......
我找到的解决方案：
使用 HTML 注释将一个 div 的结尾连接到下一个 div 的开头！
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>这样，您将拥有可读且正确缩进的代码。
而且，作为一个积极的副作用， HTML source虽然被空注释感染，但会正确缩进;
让我们来看第一个例子。以我的拙见，这个：
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>比这更好：
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>