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

Question

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

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

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

小提琴演示

我知道我可以通过删除 HTML 中 span 元素之间的空白来摆脱这个空间：

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

我正在寻找不涉及的 CSS 解决方案：

• 改变 HTML。
• JavaScript。

原文由 Šime Vidas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

---

由于这个答案变得相当流行，我正在重写它。

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

如何删除行 内块元素 之间的空间？我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。 单靠 CSS 能解决这个问题吗？

单独 使用 CSS 可以解决这个问题，但是没有 完全 可靠的 CSS 修复。

我在最初回答中的解决方案是将 font-size: 0 添加到父元素，然后在子元素上声明一个明智的 font-size 。

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

这适用于所有现代浏览器的最新版本。它适用于 IE8。它在 Safari 5 _中不起作用_，但在 Safari 6 中有效。Safari 5 几乎是一个死浏览器（ 0.33%，2015 年 8 月）。

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

但是，虽然如果您 特别需要 仅修复 CSS，这是一个合理的解决方案，但如果您可以自由更改 HTML（就像我们大多数人一样），我不建议这样做。

---

作为一名相当有经验的网络开发人员，我实际上是这样做来解决这个问题的：

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

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

原文由 thirtydot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于符合 CSS3 标准的浏览器，有 white-space-collapsing:discard

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

原文由 HBP 发布，翻译遵循 CC BY-SA 3.0 许可协议