Desalineación de encabezado y contenido

Actualizado:28 de junio de 2026

Translated

View the article in English

Al renderizar HTML a PDF, el encabezado y el pie de página pueden estar al ras del borde de la página mientras que el contenido del cuerpo se empuja hacia adentro, más visiblemente a lo largo de los márgenes izquierdo y derecho. Esto sucede incluso con MarginLeft = 0 configurado y UseMarginsOnHeaderAndFooter habilitado.

La causa es el estilo predeterminado de Chrome. Su motor de renderizado aplica un margen de 8 píxeles al elemento <body> de cada página. Ese valor predeterminado está bien para contenido web normal, pero deja un espacio visible de 8px entre su contenido y el borde del PDF, independientemente de MarginLeft = 0 que pase a ChromePdfRenderer.RenderingOptions. El encabezado y el pie de página no se ven afectados: con los márgenes configurados en 0, se alinean directamente con el borde de la página como se espera, así que solo el cuerpo se desalinean.

Este fragmento reproduce el desajuste:

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 mostrando encabezado ajustado a la izquierda pero contenido del cuerpo desalineado hacia adentro

Solución

Sobrescriba el margen predeterminado <body> de Chrome para que el contenido se alinee con el encabezado y el pie de página en todo el ancho de la página. Aplique márgenes negativos para cancelar el desplazamiento incorporado de 8px:

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

Los valores negativos neutralizan el relleno predeterminado de Chrome para que el encabezado, el cuerpo y el pie de página se alineen al mismo borde. Aplicado en línea, la representación corregida se ve así:

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 encabezado y contenido del cuerpo alineados en el mismo borde izquierdo después de la corrección

Consejos para depuración

Prefiere una hoja en blanco: en lugar de márgenes negativos, aplica un reinicio de CSS o establece margin: 0 explícitamente en el elemento <body> para eliminar el desplazamiento predeterminado en la fuente.
Alcance del comportamiento: el espacio de 8px aparece siempre que HTML se renderiza a través de Chrome sin cabeza, incluyendo IronPDF, Puppeteer y el Protocolo DevTools de Chrome, por lo que la misma solución se aplica en esas herramientas.

Curtis Chau

Chatea con el equipo de ingeniería ahora

Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

¿Listo para empezar?

Nuget Descargas 20,296,129 | Versión: 2026.7 recién publicada