多列布局列间距不均主因是gap与margin混用或未重置默认样式；CSS Columns需用column-gap而非gap，Grid/Flex可用gap；首尾不齐应加padding平衡；兼容旧浏览器时可用:not(:last-child)配margin模拟。
多列布局中列间距不均，通常不是“列本身不均”，而是 margin 与 gap 混用、或未重置默认样式 导致的视觉错觉。关键在于明确：gap 控制的是列（或行）之间的**间隙**，而 margin 是元素自身的外边距——两者叠加就会让间距变大、错位甚至塌陷。
确认是否误用了 margin 干扰 gap
当给多列容器（如 column-count 或 display: grid / flex）设置了 gap，又同时给子项加了 margin-right 或 margin-left，列间实际距离 = gap + margin，且首尾项的 margin 还会额外撑开容器边界，造成“左边空得多、右边挤得慌”。
- ✅ 正确做法：子项只设
margin: 0（或统一清零），靠gap管理列间距离 - ❌ 常见错误：
.item { margin: 0 10px; }配合gap: 20px→ 实际列距变成 30px（中间）vs 10px（边缘）
多列布局类型决定 gap 是否生效
gap 并非在所有多列场景都起作用：
-
CSS Columns（
column-count/column-width）：不支持gap！必须用column-gap（旧名-webkit-column-gap）来设置列间距离 -
Grid 布局：用
column-gap或简写gap: 0 16px（行距 空格 列距） -
Flex 布局：老版本不支持
gap，需用margin模拟（但要避免首尾项），现代浏览器已支持gap（推荐启用display: flex; gap: 16px;）
修复 column-gap 下的“首尾不齐”问题
即使用了 column-gap，文字或块级内容在首列左侧、末列右侧仍可能紧贴容器边缘，显得“不居中”。这不是间距不均，而是容器内边距缺失：
立即学习“前端免费学习笔记（深入）”；
- 给多列容器添加
padding-left和padding-right，值 ≈column-gap / 2，视觉上就平衡了 - 例如：
column-gap: 30px;→ 容器加padding: 0 15px; - 也可用
padding-inline: 15px;更语义化
兼容性兜底：gap 不生效时的 margin 替代方案
若需支持较老浏览器（如 IE 或旧版 Safari），gap 不可用，可用 margin 模拟，但必须规避首尾外边距：
- 给每个子项设
margin-right: 16px; - 再用
:last-child { margin-right: 0; }清除末项右距 - 或者更稳妥：用
.item:not(:last-child) { margin-right: 16px; } - 注意：此方式在动态增删项时需同步维护，不如
gap健壮
