如何消除内联/内联块元素之间的空白间距？

Question

在这些span元素之间将会有一个4像素宽的空格：

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

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

Fiddle Demo

我知道我可以通过在HTML中删除span元素之间的空格来去除这个空格：

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

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

• 修改HTML。
• 使用JavaScript。

Answer 1

对于符合CSS3标准的浏览器，可以使用white-space-collapsing:discard属性

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

Answer 2

或者，您可以使用flexbox来实现以前可能使用inline-block实现的许多布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

由于这个答案变得相当受欢迎，我正在重写它。

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

只使用CSS就可以解决这个问题，但没有完全稳定的CSS修复方法。

我在最初的答案中提出的解决方案是在父元素中添加font-size: 0，然后在子元素中声明合理的font-size。

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

这在所有现代浏览器的最新版本中都有效。它在IE8中有效。它在Safari 5中无效，但在Safari 6中有效。 Safari 5几乎是一个被淘汰的浏览器（0.33%，2015年8月）。

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

然而，如果您可以自由更改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/

• 或者，这样做：

  <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>

• 或者，您甚至可以完全省略某些闭合标签（所有浏览器都支持）：

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

现在，我已经用“thirtydot的一千种不同的去除空格方法”把您弄得厌烦了，希望您已经忘记了font-size: 0。