column-gap 不参与 width 计算但叠加进总宽度，导致视觉错位；margin 在多列中无法按列边界响应，仅依 dom 顺序生效，且不受 column-fill 或 break-inside 影响，真正可控方案是改用 grid gap 或避免在多列中依赖 margin。

column-gap 会叠加进盒模型，但不参与 width 计算

浏览器把 column-gap 当作“插入在列之间的额外空间”，它独立于子元素的 margin 和容器的 padding，但会直接加到容器总宽度上。结果就是：你设了 width: 100% + column-count: 3 + column-gap: 20px，实际内容区宽度 = 容器宽 − 2 × 20px，而每列的 margin 仍按原始列宽计算，导致视觉错位。

• column-gap 不受 box-sizing: border-box 约束——它永远是“额外加上的”，不是从 width 里扣出来的
• 若子项自身有 margin（比如 .item { margin: 0 10px; }），这个 margin 会和 column-gap 叠加，造成某列看起来更窄或右侧溢出
• Firefox 旧版本不支持 column-gap，用 column-rule 模拟时，规则线宽度会被误算进 gap，进一步加剧不一致

column-fill: auto 下各列高度不同，间接放大 margin 视觉差异

当使用 column-fill: auto（默认值）时，内容按 DOM 顺序流式填满第一列、再第二列……不预估高度。如果某列结尾刚好卡在一个 <p></p> 或图片处，它的底部 margin-bottom 就暴露在外；而下一列开头的 margin-top 又紧贴着前一列末尾，导致相邻列的 margin 实际没抵消，反而叠加显示。

• 这种现象在字体加载延迟、Web Font 渲染完成前尤其明显：首次渲染高度小 → margin 压缩 → 重绘后突然“跳高”，margin 位置跟着偏移
• break-inside: avoid 的元素（如大图、<pre class="brush:php;toolbar:false;"></pre>）会强制整块进同一列，让前几列被撑高，最后一列只剩文字，其 margin 在空荡区域显得格外突兀
• 即使统一写了 margin: 1rem，不同列因内容断点不同，margin 的“生效上下文”完全不同——有的在段落之间，有的在列底边沿，根本不在同一逻辑层级

多列布局中 margin 无法响应列边界，只认 DOM 顺序

CSS 多列是内容流式分片机制，不是网格轨道。浏览器不会为每一列生成独立的 BFC，也不会重写子元素的 margin 应用逻辑。所以你给所有子项写 margin-bottom: 16px，它照样作用于每个 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 元素自身，不管它落在第几列、是不是列末尾。

• 没有 :nth-last-of-column 这类选择器，:last-child 只能选中整个容器最后一个子元素，对列内末尾无效
• 列之间无 DOM 边界，margin 不会自动“在列切换时归零”——前一列末尾元素的 margin-bottom 和下一列开头元素的 margin-top 依然可能折叠（或不折叠，取决于是否触发 BFC）
• 一旦容器设了 padding，column-gap 和 padding 会共存，但 margin 仍从 content box 起算，三者坐标系不统一，计算结果自然不一致

真正可控的替代方案：别用 margin 控制列间关系

多列布局本质是排版引擎对文本流的切片，不是 UI 布局工具。想靠 margin 对齐列内元素间距，等于在报纸印刷机上拧螺丝——方向就错了。

• 纯文本场景下，优先用 line-height 和 padding 控制段落内部节奏，彻底放弃列内子项的 margin
• 需要精确列间距？换 display: grid，用 gap ——它只作用于轨道之间，不碰子项盒模型，且现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+）已全支持
• 必须用多列且含媒体元素？用 break-before/break-after 显式控制断点，配合 object-fit: cover 统一图片尺寸，减少 margin 因高度浮动带来的干扰

最麻烦的从来不是怎么加 margin，而是得接受：CSS 多列的设计目标是“让长篇文章像报纸一样分栏”，不是“让卡片列表整齐排列”。一旦内容混入非文本节点，margin 就成了不可靠的幻觉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！