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

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

リスト内にインライン ブロック要素を表示すると、項目を囲む不要なマージンが発生する可能性があります。マージンを明示的に 0 に設定しているにもかかわらず、要素には依然としてスペースが存在します。

この問題は、インライン ブロック要素の性質により発生します。インラインブロック要素は、要素間および要素の周囲の空白文字を含む空白文字を保持します。これにより、各要素の右側に 4 ピクセルのマージンが生じます。

解決策

不要なマージンを削除するには、ユーザーには 2 つのオプションがあります:

1. 表示を変更するプロパティ:

   表示プロパティを inline-block から float: left に変換します。このメソッドは、空白関連のマージンを削除します。

2. 要素タグを連結:

   リスト項目の終了タグと開始タグを一緒にブロックします。 。この方法では、マージンの原因となる空白文字が削除されます。

例

次の HTML と CSS を考えてみましょう:

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

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

表示プロパティを float: left に変更すると、不要なマージンは次のようになります。削除:

li {
  display: float: left;
  ...
}

または、タグを連結して空白文字を削除します:

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

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