HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要がある場合に非常に役立ち、これらの要素を「ブロック」または「フロート」にする必要がなくなります。しかし、問題があります。インライン ブロックを使用すると、HTML 要素間の空白がページ上に表示されます。非常に迷惑です。これらの空白を削除する方法はいくつかありますが、そのうちの 1 つは非常に巧妙な方法です。

方法1:要素間にスペースを置かない

これを修正する 100% 確実な方法は、HTML 内の要素間に空白を残さないことです。

もちろん、これは見た目が乱雑でコードの保守が困難になりますが、実用的で直感的であり、そして最も重要なのは...信頼性が高いことです。

方法2:親要素にfont-size: 0を設定する

この空白の問題に対する最善の解決策は、これらのインライン ブロック要素の親要素に font-size: 0 を設定することです。 <UL> 内にインライン ブロック <LI> がある場合は、次のようにします。

親要素のフォント サイズが子要素に影響を与えないようにするには、子要素のフォント サイズ値を再設定する必要がありますが、これは通常簡単です。問題が発生する可能性があるのは、相対的なフォント サイズを使用する場合のみです。しかし、ほとんどの場合、この方法で問題は解決できます。

方法3: HTMLコメント

この方法は少し強引ですが、同様に機能します。 HTML 要素にコメントを追加すると、要素間にスペースがないのと同じ効果が得られます。

一言で言うと…気持ち悪い。一言で言うと…気持ち悪い。 3つの言葉で言えば…わかりましたね。しかし、それは機能します！

方法4:マイナスマージン

方法 2 と非常に似ています。申し訳ありません。 inline-block の柔軟性を活用して、負のマージンを与えて空白を非表示にすることができます。

この方法は、さまざまな状況を考慮する必要があり、予期しないギャップが生じる場合もあるため、あまりお勧めできません。このトリックは使わないほうがよいでしょう。

方法5:チェーンリンク

HTML マークアップを活用するもう 1 つの方法は、要素の終了タグを次の要素の開始タグの近くに配置することです。

HTML コメントほど醜くはありませんが、コードの読みやすさに関係なく、手動で空白を削除したいと思います。

理想的なアプローチはありませんが、Web ページに空白を残さないのは悪いアプローチです。これは、インライン ブロックを使用しないように警告するものではありません。インライン ブロックは依然として非常に便利です。インライン ブロック内の空白をどのように処理するかを理解する必要があるだけです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。