设置column-count:2的ul中第二列首个li上边距不生效？

嘿，这个坑我踩过！当你给设置了column-count:2的<ul>下的所有<li>加margin-top时，第二列第一个<li>的上边距不生效，本质是CSS多列布局的margin折叠特性在搞鬼。

问题根源 #

多列布局会自动把列表内容拆分到不同列中，第二列的第一个<li>在文档流里其实是紧跟第一列最后一个<li>的，它们的垂直margin会发生折叠——简单说就是两个相邻的margin会合并成一个，而第二列首个元素的margin-top会被列的边界“吃掉”，导致看起来没生效。

几种靠谱的解决方案 #

1. 用padding-top替代margin-top（最省心的方案）

因为padding不会触发margin折叠，直接把<li>的margin-top换成padding-top就行，记得给第一个<li>去掉多余的顶部padding：

ul {
  column-count: 2;
}
li {
  padding-top: 1.5rem; /* 换成你需要的间距值 */
}
li:first-child {
  padding-top: 0; /* 移除第一个列表项的顶部间距 */
}

2. 用伪元素模拟顶部间距

如果一定要用margin的逻辑，可以给每个<li>加一个伪元素来占位，避免margin折叠：

ul {
  column-count: 2;
}
li {
  position: relative;
}
li::before {
  content: "";
  display: block;
  height: 1.5rem; /* 对应你要的上边距高度 */
  margin-top: -1.5rem; /* 抵消伪元素高度，不影响整体布局 */
}
li:first-child::before {
  display: none; /* 去掉第一个列表项的伪元素 */
}

3. 阻止容器内的margin折叠

给<ul>添加display: flow-root;（现代浏览器支持），可以让容器内部的margin不与外部折叠，同时保留margin-top的设置：

ul {
  column-count: 2;
  display: flow-root;
}
li {
  margin-top: 1.5rem;
}
li:first-child {
  margin-top: 0;
}

小提醒 #

尽量避免用break-inside: avoid;强制阻止列中断，虽然偶尔能解决问题，但会让多列布局的内容分配逻辑变得混乱，反而可能导致其他布局问题。

内容的提问来源于stack exchange，提问作者SimpleJ