HTML 要素間の空白を効果的に削除するにはどうすればよいですか?

HTML の空白文字の無視: 'white-space-collapse' プロパティ

HTML と CSS が普及しているにもかかわらず、これは、空白を無視するようにブラウザに指示する直接的な方法ではありません。これにより、画像などの要素が誤って不要なスペースで区切られ、イライラする状況が発生する可能性があります。

「white-space-collapse」プロパティ

普遍的なものはありませんが、サポートされているソリューションでは、CSS プロパティ「white-space-collapse」が有望なアプローチを提供します。画像の親要素でこのプロパティを「破棄」に設定すると、画像間の空白を効果的に削除できます。

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

欠点

残念ながら、これはこの解決策は、重大な欠点によって妨げられています。それは、(現在の知識の時点では) 'white-space-collapse' プロパティを実装している主要なブラウザはありません。これは、潜在的な有効性にもかかわらず、広く使用するには依然として非現実的であることを意味します。

代替解決策

代替案として、画像の間に HTML コメントを追加するという方法もあります。 。理想的ではありませんが、この手法を使用すると、ブラウザーが表示される空白をレンダリングできなくなります。

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

以上がHTML 要素間の空白を効果的に削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。