通常我们在不同的行中使用这样的元素，但在display:在同一行中使用标签的内联块将删除空格，但在不同的行中则不会。

在不同的行中有标签的例子:

P跨度{ 显示:inline-block; 背景:红色; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >

标签在同一行的示例

P跨度{ 显示:inline-block; 背景:红色; } < p > <span> Foo </span><span> Bar </span> < / p >

另一种有效的方法是CSS作业，对父元素使用font-size:0，并根据需要给子元素赋予font-size。

p { 字体大小:0; ｝ P跨度{ 显示:inline-block; 背景:红色; 字体大小:14 px; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >

上述方法可能在某些地方不起作用，这取决于整个应用程序，但最后一种方法是这种情况的万无一失的解决方案，可以在任何地方使用。

我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。

我想我应该在这个问题上添加一些新的东西，尽管目前提供的许多答案都是足够的和相关的，有一些新的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 >

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

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

css

float: left;

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

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

.my-span {
    position: relative;
    left: -1em;
    width: 1em;
}

<span>...</span><span class="my-span"></span>