@page规则必须位于css顶层且仅支持绝对单位。它独立于@media和body样式，控制纸张物理边距；:first等伪类在chrome中基本不可用，需js+class降级实现首页不同边距。
@page 规则必须写在 CSS 顶层，否则完全无效
很多人把 @page { margin: 15mm; } 塞进 @media print { ... } 里，结果打印预览边距纹丝不动——这不是浏览器 bug，而是规范强制要求：@page 是独立 at-rule，不能嵌套。Chrome、Edge、Firefox 全部无视这种写法。
实操建议：
- 直接放在
<style></style>标签最外层，或 CSS 文件开头（不在任何选择器、媒体查询、嵌套规则内部） - 不要写成
@media print { @page { ... } }，这在所有主流浏览器中等同于没写 - 如果用构建工具（如 Vite、Webpack），确认提取的 CSS 没被自动包裹进
@media或其他作用域
@page margin 只接受绝对单位，px 和 % 都不可靠
@page { margin: 20px; } 看似合理，但实际会因设备 DPI 差异导致物理边距漂移；@page { margin: 5%; } 则被所有浏览器静默忽略——CSS Paged Media 规范明确禁止相对单位用于 @page。
可靠单位只有四个：
-
mm（最推荐，A4 纸上 1:1 对应，无歧义） -
cm（等效，读起来更直观） -
in（适合北美用户，1 in = 25.4 mm） -
pt（1 pt = 1/72 in，排版场景常用）
错误示例：@page { margin: 1em; }、@page { margin: 10vh; }、@page { margin-top: 2rem; } —— 全部无效。
@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，得用 JS + class 降级方案
虽然规范写了 @page :first { margin-top: 40mm; }，但截至 2026 年 9 月，Chrome 稳定版对该伪类支持极弱；:left/:right 在前端打印中基本不可用——你写的规则大概率被降级为普通 @page 处理。
目前唯一稳定方案是：
- 打印前用 JavaScript 给
加 class，例如body.classList.add('print-first-page') - 在
@media print中用常规 CSS 控制该 class 下的内容位置：body.print-first-page > .content { padding-top: 40mm; } - 确保该
.content是块级容器，且未被position: absolute或flex破坏文档流
真正难的不是语法写对，而是理解 @page 不是“另一个 margin”，它是纸张本身——一旦混淆层级，调试时所有现象都会反直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
