Desalinhamento de Cabeçalho e Conteúdo

Atualizado:junho 28, 2026

Translated

View the article in English

Ao renderizar HTML para PDF, o cabeçalho e o rodapé podem ficar alinhados à borda da página enquanto o conteúdo do corpo é empurrado para dentro, mais visivelmente ao longo das margens esquerda e direita. Isso acontece mesmo com MarginLeft = 0 definido e UseMarginsOnHeaderAndFooter habilitado.

A causa é o estilo padrão do Chrome. Seu mecanismo de renderização aplica uma margem de 8 pixels ao elemento <body> de cada página. Esse padrão é bom para conteúdo da web normal, mas deixa uma lacuna visível de 8px entre seu conteúdo e a borda do PDF, independentemente do MarginLeft = 0 que você passar para ChromePdfRenderer.RenderingOptions. O cabeçalho e o rodapé não são afetados: com margens definidas para 0, eles se alinham diretamente à borda da página, conforme esperado, então apenas o corpo se desalinha.

Este trecho reproduz a discrepância:

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 exibindo cabeçalho alinhado à esquerda, mas conteúdo do corpo desalinhado para dentro

Solução

Substitua a margem padrão <body> do Chrome para que o conteúdo se alinhe com o cabeçalho e o rodapé em toda a largura da página. Aplique margens negativas para cancelar o deslocamento embutido de 8px:

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

Os valores negativos neutralizam o preenchimento padrão do Chrome para que o cabeçalho, corpo e rodapé se alinhem à mesma borda. Aplicado inline, a renderização corrigida se parece com isto:

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 mostrando cabeçalho e conteúdo do corpo alinhados à mesma borda esquerda após a correção

Dicas de Depuração

Prefira uma lousa limpa: em vez de margens negativas, aplique um reset CSS ou defina margin: 0 explicitamente no elemento <body> para remover o deslocamento padrão na origem.
Escopo do comportamento: o intervalo de 8px aparece sempre que o HTML é renderizado por meio do Chrome sem cabeça, incluindo IronPDF, Puppeteer e o Chrome DevTools Protocol, portanto, a mesma correção se aplica a essas ferramentas.

Curtis Chau

Converse agora mesmo com a equipe de engenharia.

Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...