如何消除內聯/內聯塊元素之間的空白間距？

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（大多數人都可以），這是一個合理的解決方案，但不是我推薦的解決方案。

---

作為一個經驗豐富的網頁開發人員，這是我實際解決這個問題的方法：

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