所以有很多复杂的答案。我能想到的最简单的方法是只给其中一个元素一个负边距(根据元素的位置，可以是左边距或右边距)。

我想我应该在这个问题上添加一些新的东西，尽管目前提供的许多答案都是足够的和相关的，有一些新的CSS属性可以实现非常干净的输出，在所有浏览器上完全支持，几乎没有“黑客”。这确实远离了内联块，但它给你的结果与问题要求的相同。

这些CSS属性是网格

CSS网格是高度支持的(CanIUse)，除了IE，它只需要一个-ms-前缀来允许它工作。

CSS Grid也是高度灵活的，它把表格、flex和内联块元素的所有好的部分都集中到一个地方。

创建网格时，可以指定行与列之间的间隔。默认间距已经设置为0px，但您可以将此值更改为任何您喜欢的值。

长话短说，这里有一个相关的工作示例:

身体{ 背景:lightblue; 字体类型:无衬线; ｝ .container { 显示:网格; Grid-template-columns: 100px; grid-column-gap: 0;/*不需要但有用，例如*/ grid-row-gap: 0;/*不需要但有用，例如*/ ｝ .box { 背景:红色; ｝ .box: nth-child(甚至){ 背景:绿色; ｝ < div class = "容器" > < div class = "盒子" > 你好 < / div > < div class = "盒子" > 测试 < / div > < / div >

如果你正在使用Twig模板引擎，你可以使用无空格:

<p>
    {% spaceless %}
    <span>Foo</span>
    <span>Bar</span>
    {% endspaceless %}
</p>

请注意，虽然这并没有解决所提出的确切问题，但如果有人有Twig，这可能是有用的，以避免使用一些较小的解决方案。

字体大小:0;管理起来可能有点棘手…

我认为下面的几行代码比其他任何方法都更好，更可重用，更节省时间。我个人使用这个:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

那么你可以这样使用它…

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

据我所知(我可能错了)，但所有浏览器都支持这个方法。

解释:

这工作(也许-3px可能更好)完全按照您的预期工作。

复制并粘贴代码(一次) 然后在HTML中，只需在每个内联块的父类上使用class="items"。

您将不需要回到css，并为您的新内联块添加另一个css规则。

同时解决两个问题。

还要注意>(大于号)，这意味着*/all子元素应该是内联块。

http://jsfiddle.net/fD5u3/

注意:我已经进行了修改，以适应当包装器有子包装器时继承字母间距。

我将稍微扩展一下user5609829的答案，因为我认为这里的其他解决方案太复杂/工作量太大。对内联块元素应用margin-right: -4px将删除空格，所有浏览器都支持。在这里查看更新的小提琴。对于那些担心使用负边距的人，试着阅读一下这篇文章。

不过，严格来说，这并不是问题的答案: “如何删除内联块元素之间的空格?”

您可以尝试flexbox解决方案并应用下面的代码，空格将被删除。

p {
   display: flex;
   flex-direction: row;
}

你可以在这个链接上了解更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/