如何设置利润顶部/底部到一个李？ [英] How can I set margin top/bottom to a li?

问题描述

这是我的代码：

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

=snippet-code-html lang-html prettyprint-override> < ul> < li>某事< / li> < li>其他< / li> < li>还有别的东西< / li>< / ul>

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

当前输出： b

预期输出： b
$ b

---

注意：我可以将< li> 中的所有内容封装到< div> 。然后将所有 li 的属性设置为< div> 。

解决方案

您的问题是由于折叠边距而导致的 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; / *这代替你的保证金* /} li + li {border-top：1px solid＃eff0f1;} li> span {display：block; padding：5px 4px 6px 7px; / *这是你原来的填充* /} li：hover> span {background-color：＃f7f8f8;}  

  ul> < li>< span>某事< / span>< / li> < li>< span>其他< / span>< / li> < li>< span>别的东西< / span>< / li>< / ul>  

UPDATE

如果您无法更改HTML，那么您将需要这样： / p>

  li {list-style：none; padding：5px 4px 6px 7px; margin-bottom：7px; / * 3px margin + 1px for the border * / position：relative;} li + li：before {/ *这是一个伪元素来创建边框* / content：'';显示：block; height：1px; background：＃eff0f1; position：absolute; top：-4px; left：0; right：0;} li：hover {background-color：＃f7f8f8;}  

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

---

Note: I can wrap everything which is into <li> to a <div>. And then set all those li's properties to that <div>. But I want to know how can I do that with my current HTML structure?

解决方案

Your problem is due to collapsing margins - from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing:

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

To get around this, I would wrap the content of the li in a span or div and put your original li padding on that, and then put the 3px margin as padding on your li instead:

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

If you cannot change your html then you will need something like this:

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>

这篇关于如何设置利润顶部/底部到一个李？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！