消极的保证金

你可以用负4px的边距将元素移回原位(可能需要根据父字体大小进行调整)。显然，这在旧的IE(6和7)中是有问题的，但如果你不关心这些浏览器，至少你可以保持代码格式干净。

span {
  display: inline-block;
  margin-right: -4px;
}

今天，我们应该只使用Flexbox。

旧的回答:

好吧，尽管我已经投票赞成font-size: 0;和未实现的CSS3特性的答案， 经过尝试，我发现没有一个是真正的解决方案。

实际上，没有一种解决方法没有强烈的副作用。

然后我决定从我的HTML源代码(JSP)中删除内联块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>

这很难看，但很管用。

但是，等一下……如果我生成我的div在Taglibs循环(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源代码虽然充斥着空洞的注释， 将导致正确缩进;

我们来看第一个例子。在我看来，这一点:

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

使用flexbox，并为旧浏览器做一个回退(从上面的建议):

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:

span {
    display: table-cell;
}

或者，您现在应该使用flexbox来实现许多以前可能使用内联块的布局:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

因为这个答案已经变得相当流行，所以我重新写了一遍。

我们不要忘记被问到的实际问题:

如何删除内联块元素之间的空间?我希望 一个CSS解决方案，不需要HTML源代码 篡改。单靠CSS就能解决这个问题吗?

仅用CSS就可以解决这个问题，但是还没有完全健壮的CSS补丁。

在最初的答案中，我的解决方案是向父元素添加font-size: 0，然后在子元素上声明合理的字体大小。

http://jsfiddle.net/thirtydot/dGHFV/1361/

这适用于所有现代浏览器的最新版本。它适用于IE8。它不能在Safari 5中运行，但可以在Safari 6中运行。Safari 5几乎是一个死浏览器(2015年8月，0.33%)。

大多数相对字体大小可能出现的问题都不难解决。

然而，如果你特别需要一个CSS的修复，这是一个合理的解决方案，如果你可以自由地改变你的HTML(像我们大多数人一样)，我不建议你这样做。

这是我，作为一个相当有经验的web开发人员，实际上所做的解决这个问题:

<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>第1项</li><li>第2项</li><li>第3项</li> < / ul >

http://jsfiddle.net/thirtydot/dGHFV/1362/

或者,这个: <德> < li >项目1 < / li > < li >项目2 < / li > < li > 3 < / li >项目 < /德> 或者，使用组合: <德> < li >项目1 < / li > < !-- ——> < li >项目2 < / li > < !-- 项目——> < li > 3 < / li > < /德> 或者，如果你用的是PHP或类似的方法: <德> < li >项目1 < / li > < ? ? > < li >项目2 < / li > < ? ? > < li > 3 < / li >项目 < /德> 或者，你甚至可以跳过完全关闭的标签: <德> < li >项目1 < li >项目2 < li >项目3 < /德>

现在我已经讲了“一千种不同的方法来删除空白，通过三十点”，希望你已经忘记了所有的字体大小:0。

我认为有一个非常简单/古老的方法，所有浏览器都支持，甚至是IE 6/7。我们可以简单地在父元素中将字母间距设置为一个较大的负值，然后在子元素中将其设置为正常值:

body { font-size: 24px } span { border: 1px solid #b0b0c0; } /* show borders to see spacing */ .no-spacing { letter-spacing: -1em; } /* could be a large negative value */ .no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */ <p style="color:red">Wrong (default spacing):</p> <div class=""> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div> <hr/> <p style="color:green">Correct (no-spacing):</p> <div class="no-spacing"> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div>