「margin: 0」であっても、インライン ブロック リスト項目に不要なマージンが含まれるのはなぜですか?

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

問題

表示するように設定されているリスト項目が inline- になるという問題が発生しています。マージンの CSS ルールが次のように設定されているにもかかわらず、ブロックの周囲に不要なマージンが存在します。 0.

HTML:

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

CSS:

ul {
  padding: 0;
  border: solid 1px #000;
}
li {
  display: inline-block;
  padding: 10px;
  width: 114px;
  border: solid 1px #f00;
  margin: 0;
}
li div {
  background-color: #000;
  width: 114px;
  height: 114px;
  color: #fff;
  font-size: 18px;
}

解決策

この問題は、display: inline-block プロパティによって発生します。ここに 2 つの解決策があります:

1. display: inline-block を float に変更します。左:

   • CSS:

     li {
       float: left;
     }

2. リスト間の空白を削除items:

   • 間の改行を削除します。タグを付け、終了タグと開始タグを一緒にブロックします:

     • HTML:

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

注:

inline-block は 4 ピクセルのマージンをレンダリングします各要素の右側。これを回避するには、float を使用するか、リスト項目間の空白を避けることをお勧めします。

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