这些span元素之间将有一个4像素宽的空间:
跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
小提琴演示
我知道我可以通过删除HTML中span元素之间的空白来摆脱这个空间:
<p>
<span> Foo </span><span> Bar </span>
</p>
我正在寻找一个CSS解决方案，不涉及:
修改HTML。 JavaScript。
当前回答
有很多解决方案，如字体大小: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，发现了这个:
长度 指定除了默认字符间距之外的额外字符间距。值可能是负的，但可能存在特定于实现的限制。用户代理不能为了使文本正确而进一步增加或减少字符间的空间。
看来这就是原因。
其他回答
对于符合CSS3的浏览器，有空白崩溃:丢弃
见:http://www.w3.org/TR/2010/WD-css3-text-20101005/ white-space-collapsing
使用flexbox，并为旧浏览器做一个回退(从上面的建议):
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
字体大小: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/
