Warum haben Inline-Blocklistenelemente unerwünschte Ränder und wie kann ich sie beheben?

Unerwünschter Rand in Inline-Block-Listenelementen

Beim Anzeigen von Inline-Block-Elementen innerhalb einer Liste stoßen Benutzer möglicherweise auf einen unerwünschten Rand, der die Elemente umgibt. Obwohl der Rand explizit auf 0 gesetzt ist, weisen die Elemente immer noch Abstände auf.

Dieses Problem entsteht aufgrund der Natur von Inline-Block-Elementen. Inline-Block-Elemente behalten Leerzeichen bei, einschließlich derer zwischen und um die Elemente herum. Dies führt zu einem Rand von 4 Pixeln rechts von jedem Element.

Lösung

Um den unerwünschten Rand zu beseitigen, haben Benutzer zwei Möglichkeiten:

1. Anzeigeeigenschaft ändern:

   Anzeigeeigenschaft konvertieren von Inline-Block zum Floaten: links. Diese Methode entfernt die mit Leerzeichen verbundenen Ränder.

2. Element-Tags verketten:

   Blockieren Sie die End-Tags und Anfangs-Tags der Listenelemente zusammen . Dieser Ansatz entfernt die Leerzeichen, die den Rand verursachen.

Beispiel

Berücksichtigen Sie das folgende HTML und 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;
}

Durch Ändern der Anzeigeeigenschaft in float: left wird der unerwünschte Rand entfernt entfernt:

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

Alternativ werden durch die Verkettung der Tags die Leerzeichen entfernt:

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

Das obige ist der detaillierte Inhalt vonWarum haben Inline-Blocklistenelemente unerwünschte Ränder und wie kann ich sie beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!