打印时margin消失或错位是因浏览器打印媒体默认样式重置所致；需用@media print显式重设margin、box-sizing: border-box并统一使用cm等绝对单位，且每次修改后须刷新打印预览。
打印时元素margin消失或错位
浏览器默认会忽略部分CSS样式用于打印，margin 尤其容易被重置或压缩——不是你写错了，是打印媒体的默认样式表在干预。Chrome 和 Edge 默认把 body 的 margin 设为 0，Firefox 更激进，连 div 的外边距都可能塌陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用
@media print显式重设关键容器的margin，不能依赖屏幕样式继承 - 避免只设
margin: 1cm这类简写，优先用margin-top、margin-bottom单独控制，防止方向性塌陷 - 打印预览里按
Ctrl+P（Win）或Cmd+P（Mac）刷新后才生效，改完CSS不点“重新打开打印预览”看不到效果
box-sizing: border-box 在打印中是否可靠
可靠，但前提是它已被显式声明。打印引擎不会自动继承屏幕的 box-sizing 行为，尤其当父容器没设或用了 reset.css 时，div 仍按 content-box 解析，导致你设的 width: 100% + padding: 10px 实际溢出纸张。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
@media print块内统一加* { box-sizing: border-box; }，别只靠全局样式 - 对打印核心区域（如
.print-area）单独再声明一次box-sizing，双重保险 - 避免用
max-width配合margin: auto居中——打印时max-width可能被忽略，直接用width+margin更稳
如何让页眉页脚的margin不被打印引擎吞掉
浏览器对 @page 规则的支持参差不齐：margin 可设，但仅作用于页面四周留白；而页眉页脚（@top / @bottom）本身是伪元素，它们的 margin 在多数引擎中无效，真正起效的是 @page { margin-top: 2cm; } 和页眉内容自身的 padding。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 页眉高度靠
@page { margin-top: Xcm; }预留空间，再用@top { content: element(header); }把元素塞进去 - 页眉容器（如
#header）不要设margin，改用padding-top或height控制实际占用高度 - Chrome 115+ 开始支持
@page :first，首屏页眉可单独调margin-top，避免首页多出空白
打印PDF时margin忽大忽小，和CSS单位有关吗
非常有关。px 在打印中无意义（它依赖屏幕DPI），em 和 rem 会因字体缩放被二次计算，唯一稳定的是绝对单位：cm、mm、in、pt。但注意：不同浏览器对 pt 的换算精度不同（1pt = 1/72in 是标准，但渲染时可能四舍五入到像素级）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有打印相关
margin统一用cm，例如margin: 1.5cm 1cm; - 避免混用单位，比如
margin: 10px 1cm;——px部分会被忽略或转成不可预测值 - 如果必须适配A4和Letter，用
@page { size: A4; margin: 1.5cm; }而非在元素上硬调，更可控
打印样式最麻烦的不是写不出来，而是改了没反应——因为你没意识到打印预览是个独立渲染上下文，它不继承开发者工具里看到的所有计算值。每次调 margin，都要在打印预览里点「更多设置」→「重新加载」才能看到真实结果。
