@page margin 必须写在顶层，不可嵌套于@media print中；仅支持绝对单位如mm、cm；与body margin无关，二者物理层级不同；:first等伪类在Chrome等浏览器中基本无效。
@page margin 必须写在 @media print 外部，不能嵌套
直接把 @page { margin: 10mm; } 放在普通样式表里就行，它不依赖 @media print。很多人误以为要包在 @media print { ... } 里，结果无效——@page 是独立 at-rule，浏览器只认顶层声明。
常见错误现象：@media print { @page { margin: 5mm; } } 在 Chrome、Edge、Firefox 中完全被忽略；实际生效的写法必须是：
@page {
margin: 10mm;
}
这个规则会作用于整个打印输出的物理页面盒（page box），不是文档流里的 body 或 div。
单位必须用绝对长度，px 和 % 会被浏览器无视
@page 的 margin 只接受绝对单位：推荐 mm、cm、in、pt；px 虽语法合法，但多数浏览器（尤其 Chrome）会按屏幕像素解释，导致打印时边距严重失准；% 则直接无效。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
margin: 15mm;✅ 稳定，A4 上约 15 毫米物理距离 -
margin: 1.5cm;✅ 等效，更易读 -
margin: 60px;❌ Chrome 渲染为 ~15.8mm（96dpi 下），但不同设备 DPI 不同，不可控 -
margin: 5%;❌ 所有主流浏览器忽略
区分 @page margin 和 body margin，二者完全不叠加
很多人给 body { margin: 20mm; }，发现打印边距没变——因为 body 的 margin 控制的是内容区域内部空白，而 @page margin 控制的是纸张边缘到可打印区域的物理距离。两者属于不同层级：
-
@page { margin-top: 25mm; }→ 纸张顶部留出 25mm 空白，之后才是可打印区域起点 -
body { margin-top: 0; }→ 内容从可打印区域顶部开始贴边渲染 - 如果同时设了
@page margin-top: 25mm和body margin-top: 10mm，最终内容离纸张顶边是 35mm，但这是两段独立偏移，不是 CSS 盒模型意义上的“叠加”
真正想“撑开”内容区？别动 @page，改 body 或容器的 padding/margin；想控制纸张边距？只调 @page margin。
Chrome 对 :first、:left、:right 支持极弱，慎用
虽然规范允许 @page :first { margin-top: 40mm; }，但截至 2026 年 5 月，Chrome 稳定版仍基本不识别这些伪类；Edge 和 Firefox 表现也不一致。实测中，@page :first 常被降级为普通 @page 处理，:left/:right 更是几乎无效（除非启用双面打印且后端支持，前端不可控）。
如果你真需要首页不同边距，目前最可靠的做法是：
- 用 JavaScript 动态插入一个 class 到
<body>，比如body.print-first-page - 在
@media print里用该 class 控制首屏内容的padding-top或min-height - 放弃依赖
@page :first的纯 CSS 方案
这背后的问题是：浏览器打印引擎对 Paged Media 规范的支持仍是碎片化的，@page 全局边距是少数稳定可用的部分，其余高级特性请默认不可靠。
