页眉和内容不对齐

已更新:2026年6月28日

Translated

View the article in English

在将HTML渲染为PDF时，页眉和页脚可以与页面边缘齐平，而正文内容则向内推，最明显的是左边和右边的边距。即使设置了UseMarginsOnHeaderAndFooter，这仍然会发生。

原因是Chrome的默认样式。它的渲染引擎对每个页面的<body>元素应用了8像素的边距。这个默认设置对正常的网页内容是可以的，但它在您的内容和PDF边缘之间留下了一个明显的8像素的空隙，无论您传递给MarginLeft = 0是什么。页眉和页脚不受影响：当边距设置为0时，它们按预期直接对齐到页面边缘，所以只有正文出现偏移。

此代码片段重现了不匹配：

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")

$vbLabelText $csharpLabel

PDF显示页眉靠左对齐，但正文内容向内错位

解决方案

覆盖Chrome的默认<body>边距，使内容与页眉和页脚在整个页面宽度上对齐。应用负边距以取消内置的8px偏移：

body {
margin-left: -8px;
margin-right: -8px;
}

负值中和Chrome的默认填充以便页眉、正文和页脚都对齐到相同的边缘。应用内嵌的，修正后的渲染看起来是这样的：

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1 style=\"margin-left: -8;\">Hello World</h1>");  //adjust margin left to -8 px to cancel out default Chrome margin

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1 style=\"margin-left: -8;\">Hello World</h1>");  //adjust margin left to -8 px to cancel out default Chrome margin

Imports System

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1 style=""margin-left: -8;"">Hello World</h1>") 'adjust margin left to -8 px to cancel out default Chrome margin

$vbLabelText $csharpLabel

PDF显示修复后页眉和正文内容与同一左边缘对齐

调试提示

倾向于一个干净的界面： 与其使用负边距，不如应用CSS重置或者在margin: 0，以从源头上消除默认偏移。
行为范围：无论何时HTML通过无头Chrome渲染，8px的间隙都会出现，包括IronPDF、Puppeteer和Chrome DevTools Protocol，因此相同的修正适用于这些工具。