Aqui está o meu código:

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>

Como você vê, não há espaço em branco na parte superior dessas linhas. Em outras palavras,margin-top: 3px; não funciona Por quê? E como posso corrigir isso?

Saída atual:

Saída esperada:

Nota: Eu posso envolver tudo o que está em<li> para um<div>. E então defina todos aqueleslipropriedades dessa<div>. Mas quero saber como posso fazer isso com minha estrutura HTML atual?