这些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。


当前回答

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

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

其他回答

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

词间距:-100%;

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

词间距:1 ch;

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

小提琴

CSS Text Module Level 4规范定义了一个Text -space-collapse属性,它允许控制元素内部和周围的空白如何处理。

所以,关于你的例子,你只需要这样写:

p {
  text-space-collapse: discard;
}

不幸的是,在HBP回答的评论中提到,目前还没有浏览器实现这个属性(截至2016年9月)。

或者,您现在应该使用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。

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

使用PHP括号:

申力 显示屏:inline-block; 的 <德> < li > 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < /德>