这是相同的答案，我给了相关的:显示:内联块-什么是空间?

实际上，有一种非常简单的方法可以从内联块中删除空白，既简单又语义化。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别上折叠空白(当它们在单独的行上时，由浏览器为内联元素添加)。一旦你声明了字体，你只需要在容器上改变font-family，然后在子容器上再改变，瞧。是这样的:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

很合口味。这里是我刚刚在font-forge中制作的字体下载，并使用FontSquirrel webfont generator进行转换。我只花了5分钟。css @font-face声明包括:压缩零宽度空格字体。它在谷歌驱动器，所以你需要点击文件>下载保存到你的电脑。如果您将声明复制到主css文件中，您可能还需要更改字体路径。

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

在container元素中添加white-space: nowrap:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</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。

跨度{ 显示:inline-block; 宽度:50 px; 背景:蓝色; 字体大小:30 px; 颜色:白色; text-align:中心; ｝ < p > < span > Foo < / span > < span >栏< / span > < / p >

简单:

item {
  display: inline-block;
  margin-right: -0.25em;
}

不需要触及父元素。

这里唯一的条件是:项目的font-size必须没有定义(必须等于父项的font-size)。

0.25em是默认的字间距

W3Schools -字间距属性