如何设置上边距/下边距为li？

Question

这是我的代码:

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>

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

---

当前输出:

预期产量:

---

注意:我可以将所有内容包装<li>到一个<div>.然后将所有这些li属性设置为该属性<div>.但是我想知道如何使用我当前的HTML结构来做到这一点？

Answer 1

您的问题是由于利润率下降 - 来自https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing:

块的顶部和底部边距有时会合并(折叠)为单个边距,其大小是合并到其中的边距中的最大边距,这种行为称为边距折叠.

为了解决这个问题,我会在一个span或div中包含li的内容并将原始li填充放在其上,然后将3px边距作为填充li代替:

li {
  list-style: none;
  padding: 3px 0; /* this is in place of your margin */
}
li + li {
  border-top: 1px solid #eff0f1;
}
li > span {
  display: block;
  padding: 5px 4px 6px 7px; /* this is you original li padding */
}
li:hover > span {
  background-color: #f7f8f8;
}

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

UPDATE

如果你不能改变你的HTML,那么你将需要这样的东西:

li {
  list-style: none;
  padding: 5px 4px 6px 7px;
  margin-bottom:7px; /* 3px margin plus 1px for the border */
  position:relative;
}
li + li:before {        /* this is a pseudo element to create the border */
  content:'';
  display:block; 
  height:1px;
  background: #eff0f1;
  position:absolute;
  top:-4px;
  left:0;
  right:0;
}
li:hover {
  background-color: #f7f8f8;
}

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