跳到主要内容

边距

bkhtmltopdf 通过 CSS @page 规则支持页面边距配置，使用 margin-* 属性定义顶部、右侧、底部和左侧间距。这些边距会影响 PDF 的打印布局，但需注意它们会占用内容区域的空间。

基本用法​

在 @media print 媒体查询中指定 @page 规则：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin Example</title>
    <style>
        @media print {
            @page {
                size: A5 landscape;
                margin-top: 2rem;
                margin-right: 2rem;
                margin-bottom: 2rem;
                margin-left: 2rem;
            }
        }
    </style>
</head>
<body>
<h1>Hello World!</h1>
<p>内容将受边距影响。</p>
</body>
</html>
提示

单位支持 mm、cm、in、px、em 和 rem（基于根字体大小）。推荐使用相对单位（如 rem）以适应不同页面大小。

边距效果说明​

页面边距会从 @page 区域内“切割”出空白区，导致 <body> 内容无法铺满整个页面。以下示例图展示了边距的影响

Margin example

从上图可见，内容区域被边距压缩。在实际开发中，建议优先使用 html 和 body 的 padding 属性代替 @page 边距，因为：

  • padding 不会占用页面空间，而是扩展内容容器。
  • 更易与 CSS 框架集成。
  • 避免打印时意外裁切。

推荐替代方案：使用 Padding​

/* 在 @media print 中 */
body {
    padding: 2rem; /* 等效于 2rem 边距 */
}

/* 或针对 html */
html {
    padding: 1in 2cm; /* 顶部/底部 1in，左右 2cm */
}