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

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

問題:
インライン ブロック リスト項目の周囲に不可解なマージンが存在します。 CSS でマージンを 0 に設定しているにもかかわらず、 rules.

原因:
この問題は、display: inline-block; の使用によって発生します。リスト項目の場合。インラインブロック要素は空白の影響を受けやすく、各要素の右側に 4 ピクセルのマージンが生じます。

解決策 1: float: left;
マージンを削除するには、表示を変更します。 float にするプロパティ: left;。これにより、inline-block によって導入されたスペースが削除されます。

解決策 2: ホワイトスペースを防ぐ
あるいは、リスト間のすべてのスペースを削除することで、ホワイトスペースが inline-block 要素に影響を与えるのを防ぐこともできます。以下に示すアイテムタグ:

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

別の解決策: ブロックエンドと開始タグ
終了タグと開始タグを一緒にブロックして、リスト項目を強制的に 1 つの連続した行として扱うこともできます:

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

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