这是我的代码:
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>
&#13;
如您所见,这些行的顶部没有任何空白区域。换句话说,margin-top: 3px;
不起作用。为什么?我该如何解决?
当前输出:
预期输出:
答案 0 :(得分:2)
边距是边框外的空间,填充是内容和边框之间的空间。有关详细信息,请参阅CSS box model。您可以在列表项内容中包含div,并为其分配边距和填充,但将边框保留在列表项上。
.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;