这些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,发现了这个:

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

看来这就是原因。

其他回答

另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):

词间距:-100%;

从理论上讲,它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%,即到 零。但不幸的是,似乎在任何地方都行不通,还有这个 特性被标记为“处于危险中”(它也可以从规范中删除)。

词间距:1 ch;

它将字间距缩短为数字“0”的宽度。在单空格字体中,它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+, Chrome 27+,几乎适用于Internet Explorer 9+。

小提琴

为什么不像这样……有点粗糙,取决于你的CSS单元代码,但是:

.my-span {
    position: relative;
    left: -1em;
    width: 1em;
}
<span>...</span><span class="my-span"></span>

添加字母间距:4 px;在父CSS上添加letter-spacing:0px;到生成空间css。

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; vertical-align:底部; 字母间距:0 px; } p { 字母间距:4 px; } < p > <span> Foo </span> <span> Bar </span> < / p >

对于符合CSS3的浏览器,有空白崩溃:丢弃

见:http://www.w3.org/TR/2010/WD-css3-text-20101005/ white-space-collapsing

试试这个片段:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;
    margin-right: -3px;
}

工作演示:http://jsfiddle.net/dGHFV/2784/