It paginates wrong
Page margins are ignored in a generated PDF
Content runs to the very edge of the page, or there is a margin but not the one you set. Printing it produces content inside the printer's unprintable area.
What is actually happening
Same collision as page size: a margin set in the render options and a margin set in an @page rule, with the engine picking one. There is also a third margin nobody accounts for, which is padding on body, and it stacks with whichever page margin won.
Confirming it is this and not something that looks like it
Set an obviously wrong margin, 40mm, in one place only. If it takes effect, that is the place the engine is reading, and you can set the real value there.
The fix
Choose one mechanism. Use render-option margins for the page box and body padding for nothing, or use @page margins and keep the options out of it. Then set body margin and padding to zero explicitly so the browser default of 8px does not add itself to your page box.
/* The browser default body margin is 8px and it adds to the page margin. */
html,
body {
margin: 0;
padding: 0;
}
@page {
size: A4;
/* Below about 10mm you are inside the unprintable area of most printers. */
margin: 18mm 16mm;
}If that was not it
These produce the same symptom often enough to be worth ruling out before assuming the fix above did not work.
- A body margin of 8px from the browser's default stylesheet
- Margins set in the render options and in @page at the same time
- A header or footer taller than the top or bottom margin, pushing content down
- Margins in pixels, which do not correspond to anything on paper
Frequently asked
Does this happen with every rendering engine?
The behaviour behind it is not specific to one tool. Same collision as page size: a margin set in the render options and a margin set in an @page rule, with the engine picking one. Anything rendering HTML to a paged medium has to make the same decision, so the fix travels with you if you change how the render happens.
Will this show up as an error in my logs?
No, and that is what makes it expensive. A document that renders wrong is still a successful render as far as every log line is concerned. It is found by someone opening the file, which is usually the customer.
Related failures
Problems people arrive at from the same starting point, or mistake for this one.
Page breaks land in the wrong place
Nothing told the layout where it is allowed to break, so it breaks wherever the content runs out of page.
Table headers do not repeat on the next page
Header repetition is driven by table sectioning, not by styling.
There is an extra blank page at the end
Something extends a fraction of a millimetre past the end of the last page.
Content is cut off at the right edge of the page
The element is wider than the page's content box and has nothing telling it to wrap.
Page numbers are missing or all show 1
Page numbers come from the footer template's special classes, not from CSS counters in the document body.
CSS for paged documents, and what actually works
Which parts of the paged media specification a browser-based render implements.
Everything that goes wrong, by category
The full list, grouped by where in the pipeline it breaks.
Paste your markup and see the rendered document, without signing up.