打印时gap不生效，因旧版浏览器（如Safari 14.1前、IE）及非Flex/Grid容器不支持；需检查@media print中display是否被重置，并优先用margin+page-break规则保障跨页间距可靠性。
打印时 gap 不生效？先确认容器类型和浏览器支持
gap 在打印输出中默认不被所有浏览器识别，尤其在旧版 Edge、Safari 14.1 及更早版本中，gap 完全无效。它只对 display: flex 或 display: grid 容器起作用，写在普通 <div> 或表格上毫无效果。<p>常见错误现象：页面在屏幕上显示正常间距，一点击打印预览，子元素就“贴在一起”。这不是 CSS 没加载，而是浏览器在打印媒介中跳过了不支持的声明。</p>
<ul>
<li>Chrome 84+、Firefox 63+、Edge 16+ 在打印中支持 <code>gap（但需确保未被媒体查询意外覆盖）
gap，但必须加 -webkit-gap 前缀才稳定display: table 或传统浮动布局，gap 从语法上就不合法，别指望它工作@media print 中 gap 被忽略？检查是否被重置或覆盖
很多项目在 @media print 里写了 * { margin: 0; padding: 0; } 或全局重置，这不会影响 gap 本身，但会清掉你依赖的父容器 display: flex/grid —— 因为重置常连带把 display 改成 block。
另一个隐蔽原因：某些打印样式框架（如 Bootstrap 的 print CSS）会强制设置 display: block !important 在所有元素上，直接废掉 gap 的前提条件。
立即学习“前端免费学习笔记（深入）”；
- 在
@media print中显式恢复容器布局：.grid-container { display: grid !important; } - 避免用通配符重置
display，改用针对性重置：body, header, main, footer { display: block; } - 用 DevTools 切换到打印预览模式，检查“Computed”面板里
display是否仍为grid或flex，再看gap是否出现在声明列表中
打印中需要保留间距？用 margin + page-break-inside 配合更可靠
即使 gap 在当前浏览器打印中可用，它也无法控制跨页时的断点行为。比如一个 gap: 16px 的卡片列表，第二张卡刚好卡在页尾，gap 会把第三张卡整体推到下一页，但页尾那 16px 空白可能被截断或消失——因为 gap 不参与分页计算。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
真正可控的方式是回归 margin，并配合 page-break-inside: avoid 和 page-break-after 显式干预。
- 给每个卡片设
margin-bottom: 16px，再加page-break-inside: avoid防止内容被切开 - 最后一项用
:last-child { margin-bottom: 0; }避免页尾多余空白 - 若需强制分页，用
page-break-after: always加在关键区块后，比依赖gap更可预测 - 注意：margin 会参与外边距合并（margin collapse），但在打印上下文中，多数浏览器表现一致，比
gap的兼容性更广
用 column-gap 替代 gap？小心容器类型陷阱
有人尝试在多列排版（columns: 3）中用 gap 控制列间距离，结果失败。这是因为 columns 是 CSS Multi-column Layout，它只认 column-gap，不认 gap。写错就等于没写。
而且 column-gap 在打印中支持度比 gap 更差：Chrome 90+ 支持，Firefox 70+ 支持，但 Safari 直到 15.4 才完全支持，且需双写前缀。
- 正确写法：
.multi-col { columns: 3; column-gap: 24px; -webkit-column-gap: 24px; } - 错误写法：
.multi-col { columns: 3; gap: 24px; }→ 整条声明被忽略 - 如果目标是打印报表类文档，建议放弃
columns，改用display: grid+grid-template-columns: repeat(3, 1fr)，再配gap或margin，可控性高得多
实际打印布局中，gap 的最大风险不是“怎么用”，而是“以为它能用却没用”——尤其当开发环境用 Chrome 测试通过，而客户用 Safari 打印时。最稳妥的做法是：打印专用布局绕过 gap，改用 margin + page-break 规则；屏幕展示部分再用 gap 提升维护性。两者并不冲突，只是媒介不同，规则就得分开立。
