1. ホーム
  2. ハイパーリンク

[解決済み】HTMLで空白を無視する【重複あり

2022-04-02 08:47:35

質問

HTML/CSSで、空白を完全に無視するようにブラウザに指示するものはあるのでしょうか?

例えば、画像を2つ並べたいとき、必死にHTMLを読みやすくしようと思っても、ブラウザが間にスペースを入れてしまうことがよくあるんです。

だから、このようなものではなくて

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

ということになります。

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

というのは、あまりにひどい話です

解決方法は?

ああ、それは本当に簡単に達成することができます。 1行のCSS :

#parent_of_imgs { white-space-collapse: discard; }

デメリット、ですか? 実装しているブラウザがない 非常に便利な機能(インラインブロック全般を考えてみてください)ですが、まだです :-(

夜が暗くて醜いですが、私が時々やっていたのは、コメントを使うことです。

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>