標題和內容不對齊

已更新:2026年6月28日

Translated

View the article in English

在將HTML渲染為PDF時，頁首和頁尾可能會貼近頁面邊緣，而正文內容則向內推，更明顯地表現在左右邊距上。即使設置了UseMarginsOnHeaderAndFooter，也可能發生這種情況。

原因是Chrome的預設樣式。其渲染引擎會對每個頁面的<body>元素應用8像素的邊距。這種預設對於正常的網頁內容來說沒問題，但它會在您的內容和PDF邊緣之間留下明顯的8px間隙，不論您傳遞給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渲染時，包括IronPDF、Puppeteer以及Chrome DevTools Protocol，都會出現8px間隙，因此相同的修正適用於這些工具。