HTML中如何使用@page规则控制打印页面尺寸和边距-html教程-PHP中文网

@page规则可控制打印物理页面尺寸和边距，但仅在浏览器选择“默认”页边距时生效；选“最小”或“自定义”会覆盖它，且body的margin/padding对页面盒模型无效。

html中如何使用@page规则控制打印页面尺寸和边距

@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 尺寸和统一边距

最常用写法是固定纸张尺寸 + 四周等距留白，适合通用报告类输出：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

@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 不改变内容渲染逻辑，只框定纸张

首页、左右页的差异化边距设置

双面打印或封面页需要不同边距时，用伪类选择器：

@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></style> 标签里可能被 Paged.js 忽略
Firefox 用户请放弃幻想：@page 边距支持极弱，建议导出 PDF 时换用 WeasyPrint 或 Puppeteer