The page box / margin (in @page)
How to set PDF page margins in CSS
The margin descriptor inside @page sets the unprintable border around the content area of every page.
What it is for
This is not the same as a margin on body. The page margin defines the page box; a body margin sits inside it and stacks with it. Confusing the two is why margins so often come out roughly double what was intended.
Support: Works in a browser-based render
Works, with the usual one-to-four value shorthand. Individual margin-top and similar descriptors work too.
The syntax
Written the way it would appear in a document stylesheet, using margin (in @page) as intended.
@page {
size: A4;
/* Below about 10mm you are inside the unprintable area of most desktop
printers, and the document will be clipped when someone prints it. */
margin: 18mm 16mm;
}
/* Zero the browser default, which is 8px and adds itself to the above. */
html,
body {
margin: 0;
padding: 0;
}The mistake people make
Leaving the browser's default 8px body margin in place. It is invisible on screen because everything shifts together, and on paper it is an extra two millimetres on every side that nobody asked for.
Frequently asked
Does margin (in @page) work when generating a PDF?
Works in a browser-based render. Works, with the usual one-to-four value shorthand. Individual margin-top and similar descriptors work too.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to use the @page rule for PDF output
@page. Works in a browser-based render.
How to set the PDF page size in CSS
size. Works in a browser-based render.
How to style the first page differently in a PDF
@page :first, :left, :right. Works in a browser-based render.
How to make one section landscape in a portrait PDF
page (named pages). Only in dedicated print engines.
How to put a running header in a PDF with CSS
@top-center and the margin boxes. Does nothing in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.