Başlık ve İçerik Uygunsuzluğu

Güncellendi:Haziran 28, 2026

Translated

View the article in English

HTML'yi PDF'ye işlerken, başlık ve altbilgi sayfa kenarına sıfır otururken, gövde içeriği içeri itilmiş olabilir, en çok sol ve sağ kenarlarda fark edilir. Bu, MarginLeft = 0 ayarlanmış ve UseMarginsOnHeaderAndFooter etkinleştirilmiş olsa bile meydana gelir.

Sebep Chrome'un varsayılan stilidir. Render motoru, her sayfanın <body> öğesine 8 piksel kenar boşluğu uygular. Bu varsayılan ayar normal web içeriği için uygundur, ancak ilettiğiniz MarginLeft = 0 ne olursa olsun, içeriğiniz ile PDF'nin kenarı arasında görünür bir 8px boşluk bırakır. Üst bilgi ve alt bilgi etkilenmez: kenar boşlukları 0 olarak ayarlandığında, beklendiği gibi doğrudan sayfa kenarına hizalanır, bu nedenle yalnızca ana metin hizadan çıkar.

Bu snippet uyumsuzluğu yeniden üretir:

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

Üst bilginin sola hizalandığını ancak ana metin içeriğinin içe yanlış hizalandığını gösteren PDF

Çözüm

İçeriğin, tam sayfa genişliğinde üst bilgi ve alt bilgi ile hizalanabilmesi için Chrome'un varsayılan <body> kenar boşluğunu geçersiz kılın. Yerleşik 8px ofseti iptal etmek için negatif kenar boşlukları uygulayın:

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

Negatif değerler, Chrome'un varsayılan dolgusunu nötralize eder, böylece başlık, gövde ve altbilgi aynı kenara hizalanır. Uygulanan satır içi, düzeltilmiş işleme böyle görünür:

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

Düzeltme sonrası aynı sol kenara hizalanmış üst bilgi ve ana metin içeriğini gösteren PDF

Hata Ayıklama İpuçları

Temiz bir sayfa tercih edin: negatif kenar boşlukları yerine bir CSS sıfırlama uygulayın veya varsayılan sapmayı kaynağında kaldırmak için <body> öğesine margin: 0 açıkça ayarlayın.
Davranışın kapsamı: 8px boşluk, HTML bir headless Chrome aracılığıyla işlendiğinde, IronPDF, Puppeteer ve Chrome DevTools Protokolü de dahil, ortaya çıkar, bu yüzden aynı düzeltme bu araçlarda geçerlidir.

Curtis Chau

Mühendislik ekibiyle şimdi sohbet edin

Teknik Yazar

Curtis Chau, Bilgisayar Bilimleri alanında Lisans Derecesine (Carleton Üniversitesi) sahip ve Node.js, TypeScript, JavaScript ve React konularında uzmanlaşmış ön uç geliştirmeyle ilgileniyor. Sezgisel ve estetik açıdan hoş kullanıcı arayüzleri oluşturma tutkunu, Curtis modern çerçevelerle çalışmayı ve iyi yapı...

Daha Fazla Oku

Başlamaya Hazır mısınız?

Nuget İndirmeler 20,296,129 | Sürüm: 2026.7 yeni yayınlandı