Alignement de l'en-tête et du contenu

Mis à jour:28 juin 2026

Translated

View the article in English

Lors de la conversion de HTML en PDF, l'en-tête et le pied de page peuvent s'aligner au bord de la page tandis que le contenu du corps est repoussé vers l'intérieur, surtout visible le long des marges gauche et droite. Cela se produit même avec MarginLeft = 0 défini et UseMarginsOnHeaderAndFooter activé.

La cause est le style par défaut de Chrome. Son moteur de rendu applique une marge de 8 pixels à l'élément <body> de chaque page. Ce paramètre par défaut convient pour le contenu web normal, mais il laisse un espace visible de 8px entre votre contenu et le bord du PDF, peu importe le MarginLeft = 0 que vous transmettez à ChromePdfRenderer.RenderingOptions. L'en-tête et le pied de page ne sont pas affectés : avec les marges définies sur 0, ils s'alignent directement au bord de la page comme prévu, donc seul le corps se déplace hors ligne.

Ce segment reproduit la désynchronisation :

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 montrant l'en-tête aligné à gauche mais le contenu du corps désaligné vers l'intérieur

Solution

Surcharger la marge par défaut de Chrome <body> pour que le contenu soit aligné avec l'en-tête et le pied de page sur toute la largeur de la page. Appliquez des marges négatives pour annuler le décalage intégré de 8px :

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

Les valeurs négatives neutralisent le padding par défaut de Chrome pour que l'en-tête, le corps et le pied de page s'alignent tous au même bord. Appliqué en ligne, le rendu corrigé ressemble à ceci :

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 montrant l'en-tête et le contenu du corps alignés sur le même bord gauche après la correction

Conseils de débogage

Préférez une feuille blanche : au lieu de marges négatives, appliquez une réinitialisation CSS ou définissez margin: 0 explicitement sur l'élément <body> pour supprimer le décalage par défaut à la source.
Portée du comportement : l'espace de 8px apparaît chaque fois que le HTML est rendu via Chrome sans tête, y compris IronPDF, Puppeteer, et le protocole Chrome DevTools, donc la même solution s'applique à ces outils.

Curtis Chau

Discutez maintenant avec l'équipe d'ingénierie

Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Prêt à commencer ?

Nuget Téléchargements 20,296,129 | Version : 2026.7 vient de sortir