多列布局中margin看似失效，实为被列断点切碎：浏览器分列时将margin视为可断裂位置，上下margin易落于不同列而视觉消失；break-inside: avoid须加在子元素自身，且需避免固定高度、确保父容器有足够列高。
多列布局中 margin 看似失效，其实是被列断点“切碎”了
不是 margin 没生效，而是浏览器在分列时优先保证列宽和内容可断行，margin 被当作“可断裂位置”处理——尤其当子元素高度接近列高时，它的上下 margin 很可能落在不同列里，视觉上就消失了。
典型表现：一个 .card 设置了 margin-bottom: 20px，但在 columns: 3 下，卡片底部空白突然没了，甚至卡片被从中间劈开。
-
break-inside: avoid必须加在子元素自身（如.card），不是父容器或文本节点 - 如果子元素用了
display: flex或display: grid，需确认它是否靠内容撑高；固定高度 +overflow: hidden会掩盖断裂，但实际已丢失底部margin空间 - 避免给子元素设
height或max-height，否则浏览器更倾向在margin区域断列
margin 在多列中参与外边距合并吗？不，但会被忽略
CSS 规范明确：多列容器（column-count / columns）内，子元素之间的垂直 margin 不会像块流中那样发生外边距合并（margin collapsing），但也不会被尊重为布局依据——它被降级为“建议性间距”，浏览器有权在断列时丢弃、压缩甚至移位。
- 即使两个
.card相邻，它们的margin-bottom和下一个的margin-top也不会合并，但都可能被裁掉 -
margin值仍存在于 Computed 面板里，但 Layout 标签页中看不到它对列块高度的贡献 - 用
gap替代？不行：gap在多列布局中无效（仅对flex和grid生效）
为什么加了 break-inside: avoid 还是错乱？
加了 break-inside: avoid 却依旧被劈开，大概率是父容器高度不足，或子元素内部存在隐式尺寸干扰（比如未重置的 line-height、浮动子项、或 vertical-align 偏移）。
- 浏览器需要为该元素“预留一整列空间”，若列高 break-inside: avoid 就会失效
- 检查子元素是否含图片或 iframe：它们默认是 inline 替换元素，基线对齐会额外增加顶部/底部空间，让总高度超预期
- 临时加
outline: 1px solid red到子元素，看渲染出的实际边界是否比预期高
真正可靠的替代方案：别依赖子元素 margin
多列布局本质是内容流自动分段，不是精确控制的网格系统。想稳定控制卡片间距，就得绕开子元素自身的 margin。
- 用父容器的
padding模拟：比如.news-list { column-gap: 20px; padding: 10px; }，再让子元素margin: 0 - 改用
display: grid+grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，完全避开多列限制 - 如果必须用多列，且子元素是卡片类结构，统一用
border-bottom+:last-child { border: none; }替代margin-bottom
最常被忽略的一点：多列容器本身不响应 gap，也不支持子元素 margin 的可靠累积，任何试图“修 margin”的操作，本质都是在对抗浏览器的分列策略。要么接受它的流式特性，要么换布局模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
