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

时间:2016-08-19 00:24:45

标签: javascript jquery html css

这是我的代码:

&#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;不起作用。为什么?我该如何解决?

当前输出:

enter image description here

预期输出:

enter image description here

1 个答案:

答案 0 :(得分:2)

边距是边框外的空间,填充是内容和边框之间的空间。有关详细信息,请参阅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;