Firefox と Chrome でインライン ブロック リスト項目に不要なマージンが含まれるのはなぜですか?

インライン ブロック リスト項目内の不要なマージン

指定された HTML および CSS コードで概説されているように、インラインの周囲に不要なマージンが表示される現象-ブロックリスト項目が確認されました。この問題は Firefox や Chrome などのブラウザでのみ発生し、リスト項目間に原因不明の空白スペースが生じます。

原因は表示にあります。リスト項目に適用されるプロパティ。この設定では、項目が親コンテナ内を流れる個別のブロックとして扱われます。ただし、インライン ブロック要素は、インライン要素間のデフォルトの間隔を含む、インライン要素の空白ルールを継承します。

この状況を解決するには、display: inline-block; を置き換えることを検討してください。フロート付き: 左;。このスイッチを使用すると、マージンを追加せずにリスト項目を横に並べることができます。

または、次のようにすべてのリスト項目を 1 行に配置してマージンを完全に削除することもできます。

<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

もう 1 つの回避策は、HTML タグを一緒に詰め込むことです:

<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

これらの手法を採用することで、周囲の不要なマージンを効果的に削除できます。インラインブロックリスト項目。

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