[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか？

質問

このHTMLとCSSが与えられた。

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

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

その結果、SPAN要素の間に4ピクセルの幅のスペースができます。

デモです。 http://jsfiddle.net/dGHFV/

なぜこのようなことが起こるのかは理解していますし、HTMLのソースコードでSPAN要素の間のホワイトスペースを削除すれば、このスペースをなくすことができることも知っています。

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

しかし、HTMLのソースコードをいじらなくてもいいCSSでの解決策を期待していました。

JavaScriptで解決する方法は知っています。コンテナ要素（段落）からテキストノードを削除することで、このように解決できます。

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

デモです。 http://jsfiddle.net/dGHFV/1/

しかし、この問題はCSSだけで解決できるのでしょうか？

どのように解決するのですか？

または は、フレックスボックスを使用するようにします。 を使えば、以前は inline-block を使っていたレイアウトの多くを実現することができます。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

この回答が割と好評なので、大幅に書き換えています。

実際に質問された内容を忘れてはいけません。

の間のスペースを削除する方法 inline-block 要素 ? 私は HTMLのソースコードに手を加える必要のないCSSソリューションのために を改ざんしている。 この問題は、CSSだけで解決できるのでしょうか？

それは は CSSだけで解決することも可能ですが、その場合は 完全に CSSによる強固な修正

私が最初の回答で持っていた解決策は、「Select」ボタンを追加することでした。 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>

はい、その通りです。inline-block要素の間にある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>
  
  

さて、「空白を消す千の方法 by thirtydot"」で皆さんを退屈させてしまったので、もうすっかり忘れてしまったかと思いますが font-size: 0 .