第二列顶部间距（css列）的问题

Question

我的问题是当我尝试为列的所有元素添加边距底部时：2列表，我添加了margin-bottom：5px用于间距但由于某种原因它将间距加倍。第三个元素底部和第四个元素顶部（这给我问题）

我的问题有解决办法吗？感谢

Answer 1

我刚刚在Chrome中遇到了这个错误。

通过一些调查，似乎第一列中最后一个<li>的底部位于第二列的顶部。

解决方案是将以下内容应用于<li>：

display: inline-block;
width: 100%;

希望这有帮助，其他人。

Answer 2

实际上它是当前版本的chrome中的错误。

我尝试过firefox和chrome beta，他们两个都没有遇到这个问题。

感谢您的回答

Answer 3

我最近也遇到了类似的问题，解决方案在 MDN docs 中。

.card {
  break-inside: avoid;
  page-break-inside: avoid;
}

还有一个来自 MDN 的例子。