Hier ist mein Code:

li {
  padding: 5px 4px 6px 7px;
  margin-top: 3px;
  margin-bottom: 3px;
  list-style: none;
}
li + li {
  border-top: 1px solid #eff0f1;
}
li:hover {
  background-color: #f7f8f8;
}

<ul>
  <li>something</li>
  <li>something else</li>
  <li>something else again</li>
</ul>

Wie Sie sehen, gibt es oben in diesen Zeilen keinen Leerraum. Mit anderen Worten,margin-top: 3px; funktioniert nicht. Warum? Und wie kann ich das beheben?

Aktueller Output

Erwartete Ausgabe

Hinweis Ich kann alles einpacken, was in @ i<li> zu einer<div>. Und dann setzen Sie alle dieseli 's Eigenschaften zu diesem<div>. Aber ich möchte wissen, wie ich das mit meiner aktuellen HTML-Struktur machen kann?