html - 第二个 `li` 列中的第一个 `ul` 元素没有边距？

Question

我正在尝试为具有 css 属性 column-count: 2 的 ul 元素中的每个 li 元素添加上边距> 设置。出于某种原因，边距适用于除第二列中的第一个元素之外的每个 li 元素:

ul {
  column-count: 2;
  padding: 0;
  border: 1px solid black;
}

li {
  margin-top: 10px;
}

li:nth-child(1) {
  background-color: red;
}

li:nth-child(5) {
  background-color: blue;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Answer 1

如果只使用 margin-bottom 呢？还要对您的 ul 应用 10px 填充以实现相同的效果。

ul {
  column-count: 2;
  padding: 10px 0 0 0;
  border: 1px solid black;
}

li {
  margin-bottom: 10px;
}

li:nth-child(1) {
  background-color: red;
}

li:nth-child(5) {
  background-color: blue;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>