インラインブロックリストの項目間に不要なスペースがあるのはなぜですか?それらを修正するにはどうすればよいですか?

不要なスペースを含むインライン ブロック リスト項目

インライン ブロック リスト項目の間に不要なスペースが表示されることが多く、シームレスな

の原因Spaces

インラインブロックは空白に依存し、フォント設定に依存します。デフォルトでは、フォントの文字間には少量の空白 (通常は 4 ピクセル) がレンダリングされます。これは、インライン ブロック要素間のスペースとして現れることがあります。

解決策

行をまとめて実行

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;
}

このアプローチでは、フォントの空白設定と再設定をリセットすることでスペースの問題に対処しながら、HTML の読みやすさを維持します。内容の文字サイズ。

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