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

只是为了好玩:一个简单的JavaScript解决方案。

document.querySelectorAll (.container) .forEach(清晰); 函数clear(element) { element.childNodes。forEach(检查、元素); ｝ 功能检查(项){ 如果项目。nodeType === 3) this. removecchild (item); ｝ 跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ < p class = "容器" > <span> Foo </span> <span> Bar </span> < / p >

有很多解决方案，如字体大小:0，字间距，左距，字母间距等等。

通常我更喜欢使用字母间距，因为

当我们分配一个大于额外空间宽度的值时，这似乎是可以的。1 em)。 然而，当我们设置更大的值如-1em时，word-spacing和margin-left就不合适了。 当我们尝试使用em作为字体大小单位时，使用font-size并不方便。

所以，字母间距似乎是最好的选择。

但是，我必须警告你

当你使用字母间距时，最好使用-0.3em或-0.31em，而不是其他的。

* { margin: 0; padding: 0; } a { text-decoration: none; color: inherit; cursor: auto; } .nav { width: 260px; height: 100px; background-color: pink; color: white; font-size: 20px; letter-spacing: -1em; } .nav__text { width: 90px; height: 40px; box-sizing: border-box; border: 1px solid black; line-height: 40px; background-color: yellowgreen; text-align: center; display: inline-block; letter-spacing: normal; } <nav class="nav"> <span class="nav__text">nav1</span> <span class="nav__text">nav2</span> <span class="nav__text">nav3</span> </nav>

如果你正在使用Chrome(测试版本66.0.3359.139)或Opera(测试版本53.0.2907.99)，你看到的可能是:

如果你使用的是Firefox(60.0.2)、IE10或Edge，你看到的可能是:

这很有趣。所以，我检查了mdn-letter-spacing，发现了这个:

长度 指定除了默认字符间距之外的额外字符间距。值可能是负的，但可能存在特定于实现的限制。用户代理不能为了使文本正确而进一步增加或减少字符间的空间。

看来这就是原因。

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

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

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

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

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

这个问题最简单的答案是相加。

css

float: left;

代码依赖链接:http://jsfiddle.net/dGHFV/3560/