如何为<li>元素使用margin-top？

Question

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如您所见，这些行的顶部没有任何空白区域。换句话说，margin-top: 3px;不起作用。为什么？我该如何解决？

当前输出：

预期输出：

Answer 1

边距是边框外的空间，填充是内容和边框之间的空间。有关详细信息，请参阅CSS box model。您可以在列表项内容中包含div，并为其分配边距和填充，但将边框保留在列表项上。

＆＃13;

＆＃13;

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

＆＃13;

<ul>
  <li>
    <div class="content">something</div>
  </li>
  <li>
    <div class="content">something else</div>
  </li>
  <li>
    <div class="content">something else again</div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;