@page规则必须位于css顶层且仅支持绝对单位；它定义纸张边距，与body margin无关；:first等伪类在chrome中基本无效。
@page 规则必须写在 CSS 顶层，不能嵌套在 @media print 里
很多人把 @page { margin: 10mm; } 塞进 @media print { ... } 块里，结果打印时边距完全没变——Chrome、Edge、Firefox 全部忽略这种写法。因为 @page 是独立的 at-rule，浏览器只认它出现在样式表最外层（即不被任何其他规则包裹）。
正确写法就一行，直接放在 CSS 文件开头或 <style></style> 标签里：
@page {
margin: 15mm;
}
这个声明会作用于整个打印输出的物理页面盒（page box），和 body 或 div 完全无关。
@page margin 只接受绝对单位，px 和 % 在打印中不可靠
你设 margin: 60px，Chrome 可能按 96dpi 解释成约 15.8mm，但换台打印机或不同系统 DPI 就偏移；margin: 5% 则所有主流浏览器直接无视。
可靠单位只有：
-
mm（推荐，A4 上 1:1 物理对应） -
cm（等效，更易读） -
in（英寸，适合北美用户） -
pt（1/72 英寸，排版常用）
错误示例：@page { margin: 20px; } → 打印边距失准；@page { margin: 3%; } → 无效。
区分 @page margin 和 body margin，二者物理层级不同
@page { margin-top: 25mm; } 控制的是纸张顶边到可打印区域起点的距离；body { margin-top: 10mm; } 控制的是内容从可打印区域顶部再往下偏移多少。它们不叠加，也不冲突，只是先后发生。
常见误操作：
- 想缩窄打印边距却去调
body的margin→ 没用 - 同时设了
@page margin-top: 20mm和body margin-top: 10mm，结果内容离纸张顶边变成 30mm，但这是两段独立偏移，不是盒模型意义上的“累加” - 用
padding替代@page margin→ padding 只影响内容区内部留白，不影响纸张边缘
@page :first 等伪类在 Chrome 中基本不生效
虽然 CSS Paged Media 规范写了 @page :first、@page :left，但截至 2026 年 5 月，Chrome 稳定版对这些伪类支持极弱：常降级为普通 @page 处理，:left/:right 几乎总是被忽略（除非后端双面打印引擎介入，前端无法控制）。
如果你真需要首页不同边距，目前唯一稳定方案是：
- 用 JavaScript 在打印前给
加一个 class，比如body.print-first-page - 然后用常规 CSS 控制该 class 下的容器位置或内边距，例如
body.print-first-page > .content { padding-top: 40mm; } - 避免依赖
@page :first { margin-top: 40mm; }—— 它大概率不会如你所愿
真正难的不是写对语法，而是理解 @page 不是“另一个 margin”，它是纸张物理边界上的刻度线——一旦设错单位或放错位置，整份打印输出就偏了，且很难现场调试。
