如何使用margin-top进行< li>元件？ [英] How can I use margin-top for <li> element?

问题描述

这是我的代码：

  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>某事< / li> < li>其他< / li> < li>还有别的东西< / li>< / ul>  

如您所见，这些行的顶部没有任何空格。换句话说， margin-top：3px; 不工作。为什么？

$ b

当前输出： b

预期输出： b
$ b

解决方案

边框和填充之外的空间是内容和边框之间的空间。有关详细信息，请参阅 CSS盒模型。

  .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;}  pre> 
 < ul> < li> < div class =content> something< / div> < / li> < li> < div class =content>别的东西< / div> < / li> < li> < div class =content>别的东西< / div> < / li>< / ul>  
 

Here is my 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>

As you see, there isn't any white space in the top of those rows. In other word, margin-top: 3px; doesn't work. Why? And how can I fix it?

---

Current output:

Expected output:

解决方案

The margin is the space outside of the border and padding is the space in between the content and the border. Refer to the CSS box model for more details. You can wrap div around your list item content and assign the margin and padding to it but keep the borders on the list item.

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

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

这篇关于如何使用margin-top进行< li>元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！