如何删除内联/内联块元素之间的空格？

这些之间将有 4 像素宽的空间span要素：

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

小提琴演示 http://jsfiddle.net/dGHFV/

我知道我可以通过删除之间的空白来消除该空间spanHTML 中的元素：

<p>
  <span> Foo </span><span> Bar </span>
</p>

我正在寻找一个不涉及以下内容的 CSS 解决方案：

• 更改 HTML。
• JavaScript。

或者，你现在应该使用弹性盒 http://caniuse.com/flexbox实现许多您以前可能使用过 inline-block 的布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

由于这个答案变得相当受欢迎，我正在对其进行重大重写。

我们不要忘记提出的实际问题：

如何去掉之间的空格内联块元素？我希望 对于不需要 HTML 源代码的 CSS 解决方案 篡改。这个问题可以只用 CSS 来解决吗？

It is单独用 CSS 可以解决这个问题，但是没有完全地强大的 CSS 修复。

我在最初的答案中得到的解决方案是添加font-size: 0到父元素，然后声明一个合理的font-size在孩子们身上。

http://jsfiddle.net/thirtydot/dGHFV/1361/ http://jsfiddle.net/thirtydot/dGHFV/1361/

这适用于所有现代浏览器的最新版本。它适用于 IE8。它在 Safari 5 中不起作用，但它does在 Safari 6 中工作。Safari 5 几乎是一个死浏览器（0.33%，2015 年 8 月 http://gs.statcounter.com/#desktop-browser_version_partially_combined-ww-monthly-201408-201508).

大多数与相对字体大小相关的可能问题并不复杂。

然而，虽然这是一个合理的解决方案，如果您特别需要仅修复 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>Item 1</li><li>Item 2</li><li>Item 3</li>
   </ul>
  

http://jsfiddle.net/thirtydot/dGHFV/1362/ http://jsfiddle.net/thirtydot/dGHFV/1362/

• 或这个：

   <ul>
       <li>Item 1</li
       ><li>Item 2</li
       ><li>Item 3</li>
   </ul>
  

• 或者，使用注释：

   <ul>
       <li>Item 1</li><!--
       --><li>Item 2</li><!--
       --><li>Item 3</li>
   </ul>
  

• 或者，如果您使用 PHP 或类似的：

   <ul>
       <li>Item 1</li><?
       ?><li>Item 2</li><?
       ?><li>Item 3</li>
   </ul>
  

• Or, 甚至跳过certain http://developers.whatwg.org/syntax.html#optional-tags完全关闭标签（所有浏览器都可以这样做）：

   <ul>
       <li>Item 1
       <li>Item 2
       <li>Item 3
   </ul>
  

既然我已经用“三十点删除空格的一千种不同方法”让你厌烦了，希望你已经忘记了所有这些font-size: 0.