The CSS @page at-rule
The CSS @page at-rule controls the layout of printed pages: their margins, size and orientation, e.g. @page { margin: 2cm; }. It applies only to paged media (printing and PDF export). You can target the first page or left/right pages with pseudo-classes like @page :first.
Overview
@page styles the page itself when content is printed or saved to PDF, the area around your content rather than the content inside it. Its most common job is setting the printed margins: @page { margin: 2cm; } gives every page a comfortable border.
It only affects paged media, so it does nothing on screen; you will usually write it alongside a print stylesheet (inside @media print or a print-targeted file). You can also size and orient the page with the size descriptor, like size: A4 landscape.
A handful of pseudo-classes let you treat pages differently: @page :first for the opening page, and @page :left / @page :right for the two sides of a spread (handy for mirrored margins in a booklet). For controlling where content breaks across pages, pair it with the break-before, break-after and break-inside properties on your elements.
Syntax
@page {
margin: 2cm;
size: A4;
}
@page :first {
margin-top: 4cm;
}Best practices
- Use it within your print styles to set sensible printed margins and page size.
- Target the opening page with
@page :firstand mirrored margins with:left/:right. - Control where content splits with
break-inside: avoidand friends on the elements themselves. - Always check the result in the browser's print preview, which is the only way to see
@pageapply.
Frequently asked questions
How do I set print margins in CSS?
@page { margin: 2cm; }. It controls the margins of each printed page.What does the @page at-rule do?
How do I style the first printed page differently?
@page :first { … }, for example to give the opening page a larger top margin.How do I change the printed page size?
size descriptor, e.g. @page { size: A4 landscape; }.