Chrome打印预览边距需关页眉页脚并选“无”才尊重@page;Puppeteer必须用字符串margin选项覆盖CSS;wkhtmltopdf仅认纯数字--margin-*参数,三者规则互不兼容。

Chrome DevTools 打印预览里边距改不动?
Chrome 默认打印边距(尤其是“最小边距”模式)会覆盖 HTML 中的 @page 设置,导致你写的 margin: 0 完全无效。这不是 CSS 写错了,是浏览器策略级限制。
- 打开 Chrome 打印预览(
Ctrl+P/Cmd+P),点右下角「更多设置」→ 关掉「背景图形」和「页眉页脚」——这两项会额外占位、干扰实际内容区域 - 在「边距」下拉菜单中,必须选「无」或「最小」,不能选「默认」或「高」;只有「无」才真正尊重
@page的 margin 声明 - 如果仍被截断,说明内容本身超出了可用打印区域(比如用了
position: fixed或负margin),需检查元素 computed height/width 是否溢出
用 @page 强制重置边距但没生效?
@page 是唯一能影响 PDF 页面物理边距的 CSS 规则,但它有严格限制:只接受长度值(mm、in、cm),不支持 auto、百分比或 calc();且必须写在顶层样式中(不能嵌套在 @media print 内部)。
@page {
margin: 5mm; /* ✅ 有效 */
}
@media print {
@page {
margin: 0; /* ❌ 大部分浏览器忽略 */
}
}- 所有边距单位统一用
mm(最稳定),避免混用px(Chrome 会按 96dpi 换算,易偏差) - 若需不同方向边距,写成
margin: 10mm 5mm 15mm 8mm(上右下左),不要用margin-top等单侧属性 - 某些旧版 Puppeteer 或 wkhtmltopdf 会忽略
@page,此时必须靠命令行参数补位(见下一条)
Puppeteer 导出 PDF 边距始终偏大?
Puppeteer 的 page.pdf() 默认使用系统打印机配置,@page 只起辅助作用。真正起决定性作用的是传入的 margin 选项,它会直接覆盖 CSS 设置。
await page.pdf({
format: 'A4',
margin: {
top: '5mm',
right: '5mm',
bottom: '5mm',
left: '5mm'
}
});-
margin值必须是字符串(如'10mm'),不能是数字或带单位的对象(如{ top: 10 }) - 如果页面含横向内容(
transform: rotate(90deg)),需同步调整format为{ width: '297mm', height: '210mm' },否则 margin 会按原始方向计算 - 启用
printBackground: true后,背景色可能撑开容器,间接导致内容被挤到下一页——先关掉它确认是否是背景干扰
wkhtmltopdf 边距参数不生效?
wkhtmltopdf 对 CSS @page 支持极弱,边距几乎全靠命令行参数控制,且参数名易混淆:--margin-top 控制的是「内容区顶部到纸张顶部的距离」,不是「内容区内部上边距」。
本文档说的是unity3D中shader相关的一些知识;在shader编程中,有一些术语,有时候不明白的话容易被整懵圈,所以这里就简单提一下。Shading最开始指的在素描中给物体画明暗调子,在图形学中,其实就是给Mesh上色(Mesh就是一堆三角面片,包含顶点左边,法线坐标,uv坐标之类的),wiki中说的是根据物体相对于光线的角度及其距离光源距离改变物体颜色生成photorealistic效果的过程。我们所编写的处理shading的程序就叫做shader,中文叫着色器,程序的输入是颜色,纹理,坐标等等
立即学习“前端免费学习笔记(深入)”;
wkhtmltopdf \ --page-size A4 \ --margin-top 5 \ --margin-right 5 \ --margin-bottom 5 \ --margin-left 5 \ --no-outline \ input.html output.pdf
- 所有
--margin-*值单位是mm(除非显式加in或cm),不要写5mm,只写5 - 如果用了
--zoom 2,边距也会被同比放大,应优先用--dpi调整清晰度,而非 zoom - 遇到字体模糊或边距错位,加上
--enable-local-file-access,否则本地 CSS 文件可能加载不全,导致@page解析失败
Chrome 的「无边距」选项、Puppeteer 的 margin 字符串参数、wkhtmltopdf 的纯数字 --margin-*,三者规则完全不同。最容易忽略的是:同一份 HTML,在 Chrome 打印预览里调好了,用 Puppeteer 却又变宽——因为没传 margin 选项,它根本没读你的 @page。










