@page规则可控制打印物理页面尺寸和边距，但仅在浏览器选择“默认”页边距时生效；选“最小”或“自定义”会覆盖它，且body的margin/padding对页面盒模型无效。
@page 规则能控制打印时的物理页面尺寸和边距，但仅在浏览器选择“默认”页边距时生效；选“最小”或“自定义”会直接覆盖它。
为什么设置 margin 在 body 上没用
很多人试过给 body 加 margin: 0 或 padding: 0，发现打印时顶部/侧边仍有空白。这是因为那些样式只影响文档流内元素的布局，不作用于物理纸张本身。打印输出的“页面盒模型”（Page Box）是独立层级，必须用 @page 去干预。
- 浏览器打印预览中看到的空白，90% 来自页面盒模型的默认边距（Chrome 默认约 1cm），不是 HTML 元素撑出来的
-
@page是 CSS Paged Media Module 的一部分，Paged.js、WeasyPrint、wkhtmltopdf 等工具都支持，但浏览器原生支持有限（Chrome/Edge 较好，Firefox 部分支持，Safari 基本不支持） - 单位必须用绝对长度：
mm、cm、in、pt；px或em在打印中无意义
@page 中设置 A4 尺寸和统一边距
最常用写法是固定纸张尺寸 + 四周等距留白，适合通用报告类输出：
@page {
size: A4;
margin: 15mm;
}
-
size: A4等价于size: 210mm 297mm，也支持letter、legal等别名 -
margin: 15mm是简写，等同于四边都是 15 毫米；也可拆开写成margin-top: 20mm; margin-bottom: 25mm;等 - 注意：如果 HTML 内容本身宽度超过 A4 可用宽度（比如未设
max-width: 210mm的表格），内容仍会被截断——@page不改变内容渲染逻辑，只框定纸张
首页、左右页的差异化边距设置
双面打印或封面页需要不同边距时，用伪类选择器：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
@page :first {
margin-top: 30mm;
margin-bottom: 10mm;
}
@page :left {
margin-left: 25mm;
margin-right: 10mm;
}
@page :right {
margin-left: 10mm;
margin-right: 25mm;
}
-
:first仅匹配第一页，常用于加大标题页顶部空白，或去掉首页页眉 -
:left和:right仅在启用双面打印（@media print { @page { marks: crop cross; } }等上下文）且浏览器支持时才生效；Chrome 当前对这两个伪类的支持不稳定，实测常被忽略 - 不要依赖
:left/:right做关键排版，优先用单面逻辑 + 手动分页（如div { break-before: page; }）补位
为什么改了 @page 还是没效果
常见失效原因不是语法错，而是环境或配置卡点：
- 用户在 Chrome 打印对话框里手动选了「最小边距」——这会强制覆盖所有
@page margin，唯一解法是提示用户切回「默认」 - CSS 文件没被正确加载到打印上下文：确保
<link rel="stylesheet" media="print" href="print.css">，或用@media print { @page { ... } }包一层（虽然非必需，但部分旧版 Chromium 要求） - Pagedown / R Markdown 用户：必须把
@page放进自定义 CSS 文件，并在 YAML 中通过css:显式引用；放在<style>标签里可能被 Paged.js 忽略 - Firefox 用户请放弃幻想：
@page边距支持极弱，建议导出 PDF 时换用 WeasyPrint 或 Puppeteer
真正起效的边距控制，永远发生在「用户没动手改打印设置」的前提下；所有技术方案都要先确认这个前提是否成立。
