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>

<强>更新

如果您无法更改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>

Answer 2

你可以使用相对定位的伪元素来做到这一点：

＆＃13;

li {
  padding: 5px 4px 6px 7px;
  list-style: none;
}
li + li {
  margin-top: 6px; /* total distance between elements */
}
li + li:before {
  content: '';
  display: block;
  position: relative;
  top: -8px; /* padding-top (5px) + margin-top (3px) */
  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;

Answer 3

更新：JSFIDDLE您可以尝试在li内添加其他元素。你的保证金有效，但你看不到，因为当你保证一个元素，即使边界是元素的margin-en。要证明您可以提高margin-top:20px;，您可以看到保证金有效。 padding用于从元素内部创建空间。

+----------------------------+
|                            |
|          margin            |
|                            |
|   *******border**********  |
|   *                     *  |
|   *      padding        *  |
|   *                     *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *   ---ELEMENT-----   *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *                     *  |
|   ***********************  |
|                            |
|                            |
+----------------------------+

Answer 4

<强>答案

结果很容易实现。只需添加

    background-clip: content-box;

到您的CSS。

li {
  padding: 5px 4px 6px 7px;
  list-style: none;
  
    background-clip: content-box;
}
li + li {
  border-top: 1px solid #eff0f1;
}
li:hover {
  background-color: #f7f8f8;
}

<ul>
  <li>padding</li>
  <li>padding else</li>
  <li>padding else again</li>
</ul>

背景剪辑的完整例子：

div {
  background-color:#faa;
  border:3px dotted black;
  margin:20px;
  padding:20px;
}

.normal {
    background-clip: border-box;
}

.padding-box {
    background-clip: padding-box;
}

.content-box {
  /* note this does not color the background of the border */
    background-clip: content-box;
}

<div class="normal">
  Normal
</div>

<div class="content-box">
  content box
</div>

<div class="padding-box">
  padding box
</div>

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

4 个答案: