Header and Content Misalignment

Updated:June 28, 2026

When rendering HTML to PDF, the header and footer can sit flush against the page edge while the body content is pushed inward, most visibly along the left and right margins. This happens even with MarginLeft = 0 set and UseMarginsOnHeaderAndFooter enabled.

The cause is Chrome's default styling. Its rendering engine applies an 8-pixel margin to the <body> element of every page. That default is fine for normal web content, but it leaves a visible 8px gap between your content and the edge of the PDF, regardless of the MarginLeft = 0 you pass to ChromePdfRenderer.RenderingOptions. The header and footer are unaffected: with margins set to 0, they align directly to the page edge as expected, so only the body drifts out of line.

This snippet reproduces the mismatch:

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 showing header flush left but body content misaligned inward

Solution

Override Chrome's default <body> margin so the content lines up with the header and footer across the full page width. Apply negative margins to cancel the built-in 8px offset:

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

The negative values neutralize Chrome's default padding so the header, body, and footer all align to the same edge. Applied inline, the corrected render looks like this:

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 showing header and body content aligned to the same left edge after the fix

Debug Tips

Prefer a clean slate: instead of negative margins, apply a CSS reset or set margin: 0 explicitly on the <body> element to remove the default offset at the source.
Scope of the behavior: the 8px gap shows up whenever HTML is rendered through headless Chrome, including IronPDF, Puppeteer, and the Chrome DevTools Protocol, so the same fix applies across those tools.

Curtis Chau

Chat with engineering team now

Technical Writer

Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.

...

Ready to Get Started?

Nuget Downloads 19,680,294 | Version: 2026.7 just released