column-gap 是控制多列布局中列间间隙的唯一正确属性，margin 和 padding 对列间距无效；需注意浏览器兼容性、响应式分层设置及与 break-inside: avoid 的隐性冲突。
column-count 本身不控制间距，真正管列间空白的是 column-gap；加 margin 或 padding 不但无效，还会破坏布局逻辑。
column-gap 是唯一正解，不是可选项
在 column-count 创建的多列流中，列与列之间的空隙只能由 column-gap 控制。它专为此场景设计，浏览器会自动将该值插入每对相邻列之间，且不侵占容器边缘。
-
column-gap支持px、em、rem、%，但百分比值在多列布局中行为不稳定，建议用固定单位 - 设为
0并不等于“无间隙”，某些浏览器仍保留最小渲染间隔（约 1px），需测试确认 - 旧版 Safari（≤15.6）对
column-gap支持薄弱，必须补-webkit-column-gap - 不要试图用子元素的
margin-right模拟列距——多列是内容流重排，不是 flex/grid 的子项，margin 不生效
为什么 padding 和 margin 在 column-count 里基本没用
padding 作用于容器内边距，影响的是内容区到容器边框的距离；margin 作用于容器自身在文档流中的位置。它们都不参与列与列之间的间隙计算。
- 给多列容器加
padding，只会让所有列整体向内缩进，列间距离不变 - 给子元素（如
p或div）加margin，只会影响段落内部行距或块级元素上下间距，不会拉宽列间隙 - 若误用
margin导致视觉错位，大概率是因为触发了 margin 折叠，和列布局无关 - 想让文字离列边缘有呼吸感？用
column-rule配合column-rule-width，或靠padding缩进整个容器内容区
响应式列间距要分层调，不能只靠 media query
单纯在 @media 里改 column-gap 值容易遗漏实际需求：小屏单列时，column-gap 完全不生效；而大屏列数变多后，总间隙 = (列数 − 1) × column-gap，可能撑爆容器。
- 移动端（
max-width: 768px）建议设column-count: 1，此时column-gap被忽略，改用padding控制段落左右留白 - 中屏（
769px–1023px）用column-count: 2+column-gap: 12px - 桌面端（≥
1024px）用column-count: 3+column-gap: 20px - 更稳妥的做法是放弃
column-count，改用column-width: 280px，让浏览器自动算列数，再统一配column-gap
column-gap 和 break-inside: avoid 共存时的隐性冲突
当同时使用 column-gap 和 break-inside: avoid（防止卡片跨列断裂）时，浏览器可能因高度计算误差导致列高不均，间接放大列间视觉间隙。
- 确保目标元素（如
.card）是多列容器的直接子元素，且display: block - 如果卡片内容高度差异大，
column-gap看似“变大”，其实是某列被拉高后，相邻列底部留白增多 - 调试时打开 DevTools 的 “Layout” 面板，勾选 “Show column boundaries”，观察实际列高是否一致
- 极端情况可加
height: min-content到容器上，抑制列高自动拉伸
真正难控的不是数值本身，而是列高自动均衡机制 —— 它会让 column-gap 的视觉表现浮动。别只盯着 gap 值调，先稳住内容块的结构和高度约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
