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

Question

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

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

Answer 1

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

我试过 firefox 和 chrome beta，它们都没有这个问题。

感谢您的回答

Answer 2

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

稍加调查，第一列最后一个 <li> 的底部似乎放在了第二列的顶部。

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

display: inline-block;
width: 100%;

希望这对其他人有所帮助。

Answer 3

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

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

以及来自 MDN 的示例。