Warum haben meine Inline-Blocklistenelemente trotz „margin: 0' unerwünschte Ränder?

Unerwünschter Rand in Inline-Block-Listenelementen

Problem

Ich stoße auf ein Problem, bei dem Listenelemente angezeigt werden sollen: inline- Blöcke haben einen unerwünschten Rand um sich herum, obwohl die CSS-Regel für den Rand auf eingestellt ist 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;
}

Lösung

Dieses Problem wird durch die Eigenschaft display: inline-block verursacht. Hier sind zwei Lösungen:

1. Anzeige ändern: inline-block zu float: left:

   • CSS:

     li {
       float: left;
     }

2. Entfernen Leerzeichen zwischen Listenelementen:

   • Entfernen Sie die Zeilenumbrüche zwischen

   • Tags und blockieren Sie die End-Tags und Anfangs-Tags zusammen:

     • HTML:

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

Hinweis:

inline-block rendert einen 4-Pixel-Rand rechts von jedem Element. Um dies zu vermeiden, wird empfohlen, entweder Float zu verwenden oder Leerzeichen zwischen Listenelementen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWarum haben meine Inline-Blocklistenelemente trotz „margin: 0' unerwünschte Ränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!