如何用CSS的@page和@media print精确控制网页打印边距？

在网页开发中，打印样式常常被忽视，直到用户反馈打印出来的文档边距错乱才去排查。CSS提供了两套与打印相关的机制，分别是@page规则和@media print条件组，它们作用于不同的渲染阶段，只有理解其底层逻辑才能精确控制打印边距。

@page规则的工作原理

@page是CSS Paged Media模块的一部分，它描述的是“页面框”本身的属性，也就是打印纸张的页面尺寸、页边距以及方向。浏览器在打印时会先根据@page计算出可用的页面区域，然后再把文档内容流入这个区域。这与屏幕渲染完全不同，屏幕没有固定纸张边界，而打印必须有。

在@page中设置的margin，指的是纸张边缘到页面内容区域的距离，属于物理页边距。很多开发者习惯在body上写margin来控制打印留白，但这样只是控制了文档流的外间距，遇到分页时每一页的头部和底部仍可能受浏览器默认页边距影响。下面是一段典型的@page定义：

@page {
  size: A4;
  margin: 20mm 15mm;
}

@page :first {
  margin-top: 30mm;
}

上面代码中，size指定纸张为A4，margin统一设置上下20毫米、左右15毫米。:first伪类允许首页使用不同的上边距，常用于封面或单据抬头。这种控制是全局性的，不依赖具体HTML结构。

@media print的作用范围

@media print用于区分“屏幕样式”和“打印样式”。在@media print块里写的CSS，只会在打印或打印预览时生效。它无法直接定义纸张大小，但能隐藏屏幕元素、调整字体颜色、改变布局流向，从而配合@page的边距达到理想效果。

例如，屏幕上的导航栏在打印时通常无用，可以用@media print将其隐藏，避免占用@page设定的内容区域。注意，@media print里设置的margin作用于HTML元素，不会覆盖@page的页面框边距。二者是互补关系：@page管纸张，@media print管内容呈现。

@media print {
  .site-nav, .sidebar {
    display: none;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  .content {
    width: 100%;
  }
}

这段样式在打印时隐藏导航与侧边栏，把正文字号改为12pt并强制黑色，同时让内容区占满@page提供的可用宽度。如果@page已设左右15毫米边距，那么.content实际打印宽度就是A4宽度减去30毫米。

常见误区与正确组合方式

一个常见误区是认为在@media print里写body { margin: 0 }就能去掉打印白边。实际上浏览器自身可能仍有默认页边距，必须由@page覆盖。另一个误区是在@page里用百分比margin，部分浏览器对百分比支持不稳定，建议使用绝对长度如mm或cm。

正确的做法是将两者结合：用@page锁死纸张与页边距，用@media print清理界面噪音并微调排版。下面给出一个完整示例，实现A4纸张、上下15毫米左右10毫米边距，并打印时隐藏按钮：

@page {
  size: A4;
  margin: 15mm 10mm;
}

@media print {
  .toolbar, .print-btn {
    display: none;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #333;
    padding: 4px 6px;
  }
}

在这个方案中，表格会严格落在页面内容区内，不会被浏览器默认边距挤压。如果需要在每页底部加页码，还可以配合@page底部边距与固定定位元素，但需注意分页断裂问题。

调试与兼容性建议

调试打印样式应使用浏览器的打印预览功能，而不是单纯看屏幕。Chrome和Edge对@page支持较好，Firefox在部分旧版本中忽略size声明，此时可提示用户手动选择纸张。为避免意外，关键单据建议导出PDF再打印。

总结来说，精确控制网页打印边距的核心在于：用@page定义页面框与物理边距，用@media print优化打印内容。分清二者职责，就能摆脱默认边距带来的排版灾难，让网页打印结果符合业务预期。

CSS_print@pagemedia_print修改时间：2026-08-03 23:00:23