☰

インライン/インラインブロック要素間のスペースを削除するにはどうすればいいですか? 質問する

tag-icon • tag-icon html css flexbox
インライン/インラインブロック要素間のスペースを削除するにはどうすればいいですか? 質問する

spanこれらの要素の間には 4 ピクセル幅のスペースがあります。

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

フィドルデモ

spanHTML 内の要素間の空白を削除することで、そのスペースを取り除けることは理解しています。

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

以下の要素を含まない CSS ソリューションを探しています:

  • HTML を変更します。
  • JavaScript。

ベストアンサー1

あるいは、フレックスボックスを使うべきこれまで 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 を自由に変更できる場合 (ほとんどの人はそうである) にはお勧めしません。

かなり経験豊富な 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 による、空白を削除する 1,000 通りの方法」であなたをうんざりさせてしまったので、 のことをすっかり忘れていただければ幸いですfont-size: 0。

おすすめ記事