The page box / size
How to set the PDF page size in CSS
The size descriptor inside @page sets the paper dimensions, either by name (A4, Letter) or as an explicit width and height.
What it is for
Named sizes are the right default because they mean the same thing to every printer in the world. Explicit dimensions are for the cases with no name: shipping labels, receipt rolls, badge stock.
Support: Works in a browser-based render
Named sizes and explicit dimensions both work. The keywords portrait and landscape work as a second value alongside a name.
The syntax
Written the way it would appear in a document stylesheet, using size as intended.
/* Named, which is what almost every document wants. */
@page { size: A4 portrait; }
/* Landscape, as a modifier on the name rather than as swapped dimensions. */
@page { size: A4 landscape; }
/* Explicit, for stock with no standard name. A 4x6 shipping label: */
@page { size: 101.6mm 152.4mm; margin: 4mm; }
/* An 80mm receipt roll, which has a width and no fixed height. */
@page { size: 80mm 297mm; margin: 3mm; }The mistake people make
Giving the size in pixels. Pixels convert at 96 to the inch, so 794px is A4 width only by coincidence of arithmetic, and any rounding difference shows up as a hairline margin. Use millimetres or inches for anything that will be printed.
Frequently asked
Does size work when generating a PDF?
Works in a browser-based render. Named sizes and explicit dimensions both work. The keywords portrait and landscape work as a second value alongside a name.
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 PDF page margins in CSS
margin (in @page). 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.