The page box / @page :first, :left, :right
How to style the first page differently in a PDF
Page pseudo-classes let the first page, and left and right pages in a double-sided document, carry different margins from the rest.
What it is for
A first page usually has a letterhead and needs room for it. A bound document needs a wider inner margin, which alternates side depending on whether the page is a left or a right. Neither is expressible without these.
Support: Works in a browser-based render
:first works. :left and :right work but only matter if the document will be printed double-sided, and they have no effect on the on-screen appearance of the file.
The syntax
Written the way it would appear in a document stylesheet, using @page :first, :left, :right as intended.
@page {
size: A4;
margin: 18mm 16mm;
}
/* Room for the letterhead, on page one only. */
@page :first {
margin-top: 48mm;
}
/* A binding margin that alternates. Inner edge wider than outer. */
@page :left { margin-left: 16mm; margin-right: 24mm; }
@page :right { margin-left: 24mm; margin-right: 16mm; }The mistake people make
Expecting :first to style the content of the first page. It styles the page box, meaning its margins, and nothing else. The letterhead itself is still an element in the document flow.
Frequently asked
Does @page :first, :left, :right work when generating a PDF?
Works in a browser-based render. :first works. :left and :right work but only matter if the document will be printed double-sided, and they have no effect on the on-screen appearance of the file.
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 set PDF page margins in CSS
margin (in @page). 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.