インライン/インラインブロック要素間の空白を削除するにはどうすればよいですか?

Question

<p>これらの <span>span</span> 要素の間には 4 ピクセル幅のスペースがあります: </p> <pre class="ブラシ:css;ツールバー:false;">スパン { 表示: インラインブロック; 幅: 100ピクセル; 背景色: ペールバイオレット; }</pre> <pre class="brush:html;toolbar:false;"><p> <span> フー </span> <span> バー </span> </p></pre> <p>フィドルのデモ</p> <p>HTML 内の <span>span</span> 要素の間のスペースを削除することで、このスペースを削除できることはわかっています。 <pre class="brush:html;toolbar:false;"><p> <span> Foo </span><span> Bar </span> </p> </pre> <p>以下を含まない CSS ソリューションを探しています: </p>

<li>HTMLを変更します。 </li> <li>JavaScript を使用します。 </li> </ul>

Answer 1

CSS3 標準に準拠するブラウザの場合、white-space-collapses: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- -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 開発者として、この問題を実際に解決した方法は次のとおりです:

リーリー

はい、それだけです。 HTML 内のインライン ブロック要素間のスペースを削除しました。

＃＃＃それは簡単です。これはとても簡単です。どこでも機能します。これは現実的な解決策です。

空白の原因について注意深く考える必要がある場合があります。 JavaScript を使用して別の要素を追加すると、スペースが追加されますか?いいえ、正しく実行すれば。

魔法の旅に出て、新しい HTML を使用してスペースを削除するさまざまな方法を学びましょう:

リーリー

• 私が通常行っていることをあなたも行うことができます:

  リーリー

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

• または、次のようにします:

  リーリー

• または、コメントを使用します:

  リーリー

• または、PHP または類似のものを使用している場合:

  リーリー

• あるいは、

  特定の 終了タグを完全に省略することもできます (すべてのブラウザでサポートされています): リーリー

  「thirtydot のスペースを削除する千種類の方法」に飽きてしまったので、
font-size: 0

を忘れていただければ幸いです。