打印时padding被截断是因为物理纸张无滚动机制，内容超出可打印区域即被裁切；应使用@page设置margin控制边界，而非依赖padding，并通过导出pdf验证真实效果。
打印时 padding 被截断，不是 CSS 写错了
浏览器打印预览里，元素明明设置了 padding，但纸张边缘的内容就是被砍掉——这不是你漏写了 box-sizing，而是打印媒介默认会裁掉“页边空白”（margin area）之外的一切。CSS 盒模型在屏幕渲染和打印输出中对 padding 的处理逻辑一致，但**物理纸张没有“可视区滚动”这个概念**，一旦内容超出可打印区域（即 printer’s printable area），padding 也会跟着被物理裁切。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
padding来“撑开”页边距；它属于内容盒内部，不参与打印安全区的定义 - 用
@page规则设置margin，这才是真正控制纸张四周边界的唯一可靠方式 - 检查打印机驱动是否启用了“无边距打印”，多数消费级设备不支持，即使 CSS 设了
@page { margin: 0 }也可能被硬件强制覆盖
@page 的 margin 值为什么有时不生效
@page 是唯一能影响实际出纸边距的 CSS 机制，但它受三重限制：浏览器实现差异、操作系统打印对话框覆盖、以及打印机固件本身的最小边距限制（常见为 3–5mm）。Chrome 和 Edge 对 @page { margin: 1cm } 支持较稳，Firefox 在某些 PDF 导出路径下会忽略 margin 并回退到系统默认值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终用绝对单位（
mm或cm），避免em/rem—— 打印上下文无根字体尺寸参考 - 若需兼容 Firefox，额外加一层
body的margin作为降级（例如body { margin: 1cm }），虽然语义上冗余，但能兜底 - 测试时导出为 PDF 再打开查看，比直接点“打印预览”更真实——预览窗常缓存旧样式或跳过部分
@page解析
如何让 padding 在打印中“可见”而不被裁
想让内边距表现为视觉留白？关键不是加大 padding，而是把它“挪进”可打印区域之内。本质是把 padding 当作内容布局的一部分，而非页边控制手段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用
@page { margin: 1.5cm }锁定安全边界，再在容器上设padding: 0.5cm—— 这样padding实际落在纸张可印范围内 - 避免在
html或body上设padding，它们会被@page margin外部裁切逻辑优先压制 - 如果内容必须紧贴纸张边缘（如信封模板），别硬调
padding，改用transform: translateX(-2mm)微调，它不改变盒模型尺寸，只做视觉位移
Chrome DevTools 打印模拟器不准，别全信
DevTools 的 “Rendering > Emulate CSS media > print” 只模拟媒体查询切换，**完全不模拟打印机的可打印区域、硬件 margin 限制、甚至不分页逻辑**。你在里面看到的 padding 完整显示，不代表真机打印也如此。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次调整后必须用
Ctrl+P → Save as PDF导出验证，PDF 文件的边界才是真实约束 - 同一份 CSS，在 Chrome 导出 PDF 和 Edge 直接打印可能产出不同结果——Edge 更倾向尊重
@page，Chrome 更容易被系统对话框劫持 - 如果客户反馈打印错位，第一反应不是改代码，而是问清对方用的浏览器 + 导出方式（直接打印？PDF？哪个 PDF 阅读器打开？）
纸张边缘不是像素画布，padding 的存在感取决于它有没有被塞进那几毫米的可印带里。这层物理约束，写十遍 !important 也绕不过去。
