column-gap 列间距属性

最后更新：2026-09-13

column-gap column-gap 列间距属性

column-gap 属性用于设置多列布局中列与列之间的间距。它是 CSS 多列布局的重要组成部分，合理设置列间距可以显著提升多栏文本的可读性和美观度。

分类
初始值	normal
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

column-gap: normal | <length-percentage>;

⚙️ 取值

值	类型	描述
`normal`	关键字	默认列间距
`<length>`	类型	固定列间距

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
column-gap	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： normal 值通常等于 1em（基于当前字体大小），是默认的列间距。

注意： 列间距过小会让两列文字难以区分，过大则会浪费空间并打断阅读视线。一般建议设置为 1.5em~2em 或 24px~40px。

❓ 常见问题

Qcolumn-gap 和 gap 有什么区别？

Acolumn-gap 是多列布局中专用的列间距属性；gap 是 Flexbox 和 Grid 的通用间距属性。两者在现代浏览器中是同一套间距体系：gap 可用于多列布局（此时等价于 column-gap），也支持 flex/grid 的 row-gap、column-gap。多列布局用 column-gap 语义清晰。

Qcolumn-gap 可以使用百分比吗？

A可以。根据 CSS 多列规范，column-gap 的取值是 normal 或 <length-percentage>，百分比相对于多列容器的宽度计算，属于较新的特性（早期规范只允许长度值）。如果需要兼容旧浏览器，建议仍用 px/em 等固定长度，百分比在部分旧内核上有降级风险。

Qcolumn-gap 的默认值是多少？

A默认值是 normal，浏览器通常按 1em（基于当前字体大小）渲染，也就是列间距会随字号变化。如果希望列间距固定可控，应显式设置长度值，如 column-gap:32px。注意不同浏览器对 normal 的解释基本一致（1em），但显示结果仍受字体影响。

Qcolumn-gap 会占用列宽吗？

A不会。列间距是独立在列与列之间的空间，浏览器在分配列宽时会先把所有 column-gap 的总和扣除，再把剩余宽度分给各列。所以设置较大的 column-gap 会让每列变窄，需要保证列间距与列宽的比例合适，避免列被挤得过窄影响阅读。