헤더와 내용의 불일치

Updated: 2026년 6월 29일

HTML을 PDF로 렌더링할 때 헤더와 푸터는 페이지 가장자리에 맞닿고, 본문 내용은 내부로 밀려나가며, 특히 왼쪽과 오른쪽 여백이 가장 두드러집니다. 이 현상은 MarginLeft = 0 가 설정되고 UseMarginsOnHeaderAndFooter 이 활성화된 경우에도 발생합니다.

원인은 Chrome의 기본 스타일링입니다. 그의 렌더링 엔진은 모든 페이지의 <body> 요소에 8픽셀의 여백을 적용합니다. 그 기본값은 일반 웹 콘텐츠에 적합하지만, MarginLeft = 0 를 ChromePdfRenderer.RenderingOptions 에 전달하더라도 콘텐츠와 PDF 가장자리 사이에 8px의 눈에 띄는 간격이 남습니다. 헤더와 푸터는 영향을 받지 않습니다: 여백이 0 로 설정되면 페이지 가장자리에 일치하게 정렬되므로, 본문만 줄선에서 벗어납니다.

이 코드 조각은 불일치를 재현합니다:

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>");

헤더가 왼쪽으로 밀려 있지만 본문 내용은 내부로 잘못 정렬된 PDF

해결책

콘텐츠가 전체 페이지 너비에 걸쳐 헤더 및 푸터와 일치하도록 Chrome의 기본 <body> 여백을 재정의하세요. 내장 8px 오프셋을 취소하기 위해 음수 여백을 적용하세요:

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

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

Text

음수 값은 Chrome의 기본 패딩을 중화시켜 헤더, 본문, 푸터가 모두 같은 가장자리에 정렬됩니다. 인라인으로 적용할 경우, 수정된 렌더는 다음과 같이 보입니다:

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

수정 후 동일한 왼쪽 가장자리에 정렬된 헤더와 본문 내용을 보이는 PDF

디버그 팁

깨끗한 상태를 선호하세요: 부정적인 여백 대신, CSS 리셋을 적용하거나 기본 오프셋을 소스에서 제거하기 위해 margin: 0 를 <body> 요소에 명시적으로 설정하세요.
행동의 범위: 8px 간격은 IronPDF, Puppeteer 및 Chrome DevTools Protocol 등 헤드리스 Chrome을 통해 HTML이 렌더링될 때마다 나타나기 때문에 이 수정사항이 해당 도구들에 걸쳐 적용됩니다.

Curtis Chau

지금 바로 엔지니어링 팀과 채팅하세요

기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

...

더 읽어보기