インラインブロックリストの項目間に不要なスペースができるのはなぜですか?

インライン ブロック リスト項目間の不要なスペース

リスト項目をインライン ブロック要素として構成しているにもかかわらず、ユーザーはリスト項目間に不要なスペースに遭遇することがよくあります。この問題は、インライン ブロック要素とフォント設定の固有の空白の依存関係に起因します。

原因を理解する

インライン ブロック要素が正しく機能するには、空白が必要です。リスト項目間のスペースはフォントの間隔設定によって決まり、デフォルトは 4px です。インラインブロック要素はインラインに配置されるため、この間隔はギャップとして現れます。

考えられる解決策

スペースの問題を回避するには、次の解決策を検討してください。

• リスト項目を 1 行に結合: すべてのリスト項目をグループ化します。
• 終了タグと開始タグをインターリーブする: 隣接するリスト項目を 1 つのブロック内で囲みます:

<ul>
    <li><div>first</div></li><li><div>second</div></li><li><div>third</div></li><li><div>fourth</div></li>
</ul>

• 親要素のフォント サイズを 0 に設定します: のフォント サイズをリセットします親要素をゼロにして、スペースを効果的に削除します:

ul {
    font-size: 0;
}

• 子要素のフォント サイズを明示的に設定します: インライン リスト項目に特定のフォント サイズを設定します。

ul li {
    font-size: 14px;
    display: inline-block;
}

これらの解決策に従うことで、間の不要なスペースを削除できます。リスト項目をインラインブロックし、必要なレイアウトを維持します。

以上がインラインブロックリストの項目間に不要なスペースができるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。