inline-block 属性値は、「inline」要素のマージンとパディングを制御する必要がある場合に非常に役立ちます。これを使用すると、これらの要素を「block」および「float」にする必要がなくなります。しかし、問題があり、インラインブロックを使用すると、HTML 要素間の空白がページ上に表示されてしまいます。とてもうるさい。これらの空白を削除する方法はいくつかありますが、そのうちの 1 つは非常に賢いものです。
方法 1: 要素間に空白を残さない
この問題に対する 100% の解決策は、HTML コード内の要素間に空白を残さないことです:
<ul> <li>Item content</li> <li>Item content</li> <li>Item content</li> </ul>
もちろん、これでは見た目が汚くなり、コードの保守が難しくなります。しかし、非常に実用的で、非常に直観的で、そしてさらに重要なことに...非常に信頼性があります。
方法 2: 親要素に font-size: 0 を設定する
この空白の問題に対する最善の解決策は、これらの inline-block 要素の親要素に font-size: 0 を設定することです。
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}親要素のフォント サイズが子要素に影響を与えないようにするには、再設定する必要があります。子要素のフォント -size 値。これは通常は単純です。問題が発生する可能性があるのは、フォントを相対サイズで設定した場合のみです。しかし、ほとんどの場合、この方法で問題は解決します。
方法 3: HTML コメント
この方法は少し乱暴ですが、それでも機能します。 HTML 要素間のスペースをコメントで埋めると、要素間に空白が存在しなかった場合と同じ効果があります:
<ul> <li>Item content</li><!-- --><li>Item content</li><!-- --><li>Item content</li> </ul>
一言で言えば...うんざりです。一言で言えば...とても嫌だ。 3 つの言葉で言うと…わかりました。しかし、それはうまくいきます！
方法 4: マイナスのマージン
方法 2 と非常に似ていますが、申し訳ありません。インラインブロックの柔軟性を利用して、空白を隠すために負のマージンを設定することができます:
.inline-block-list li {
margin-left: -4px;
}さまざまな状況を考慮する必要があり、場合によっては予期せぬ結果が空白で発生する可能性があるため、この方法は最もお勧めできません。この裏技は使わないほうがいいでしょう。
方法 5: 先頭から末尾まで
HTML タグを活用するもう 1 つの方法は、要素の終了タグと次の要素の開始タグを近くに配置することです:
<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li> </ul>
HTML コメントほど見苦しくはありませんが、コードの読みやすさに関係なく、これらの空白を削除してください。
理想的な方法はありませんが、Web ページに空白を残さないのも悪い方法です。これはインライン ブロックの使用に対する警告ではありません。インライン ブロックは依然として非常に便利ですが、その中に表示される空白の処理方法を理解する必要があるだけです。
以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
HTML のインライン ブロックの空白をすばやく削除する 5 つの方法については、PHP 中国語 Web サイトの関連記事に注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
