列表项和有序列表在使用列时有奇怪的间距

Question

我使用

columns

属性来打破此有序列表和子列表项以创建两列显示。我还在列表项上添加了一些底部边距，以在元素之间添加一些间距。

在“三部分预览”中，如果您检查有序列表，列表的底部会直接对接到段落的底部（正如它应该的那样）。

屏幕截图显示列表项底部和边距开头之间没有多余的空间，如预期的那样

但是，如果列的高度相等，则有序列表的底部会有一些隐藏的间距，如下所示：

显示有序列表底部附加填充的屏幕截图

这不是列表项或段落上的任何边距或填充。您可以看到我将段落边距设置为 0。

现在看来是由于使用

columns

和

margin-bottom

之间的问题引起的。如果你去掉

<li>

上的边缘底部，神秘的间隙就会消失。但

margin-bottom

不应该在

<ol>

父级之间造成任何间距。为了证明这一点，这就是为什么我有第一个“三部分预览”。这些列表项也有一个底部边距，但如上面第一个屏幕截图所示，没有神秘的填充。

什么可能导致这种额外的间距？任何想法表示赞赏。

我尝试过的：

我的目标是找出导致列表项和有序列表之间神秘间距的原因。我已将其缩小到列表项的边距底部，但这不会影响间距，如图所示。我尝试使用 margin-top 而不是 margin-bottom，但如果有序列表中有两个列表项，我仍然有神秘的空间。

.columns {
  -webkit-columns: 2;
  columns: 2;
  -webkit-column-gap: 3rem;
  column-gap: 3rem;
}

.item {
  break-inside: avoid;
}

p {
  margin: 0;
}

li {
  margin-bottom: 15px;
}

li:last-of-type {
  margin-bottom: 0;
}

<h2>
  three section preview
</h2>
<ol class="columns">
  <li class="item">
    Section 1
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
  <li class="item">
    Section 2
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
  <li class="item">
    Section 3
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
</ol>

<hr />

<h2>
  two section preview
</h2>

<ol class="columns">
  <li class="item">
    Section 1
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>
  </li>
  <li class="item">
    Section 2
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
</ol>

Answer 1

问题出在您的

li:last-of-type

选择器上。因为您有多个

li

，所以它仅针对最后一个（在本例中为右列中的那个），因此在左列

li

的底部留有一些边距。

不幸的是，根据这个 StackOverflow 答案，它看起来不像你正在寻找的东西是可能的。我建议使用 flexbox 作为替代方案。