References

Beginner-friendly references for web development, with live, editable examples.

The CSS @page at-rule

At-rule CSS All modern browsers Updated
Quick answer

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 :first and mirrored margins with :left / :right.
  • Control where content splits with break-inside: avoid and friends on the elements themselves.
  • Always check the result in the browser's print preview, which is the only way to see @page apply.

Frequently asked questions

How do I set print margins in CSS?
Use @page { margin: 2cm; }. It controls the margins of each printed page.
What does the @page at-rule do?
It styles the page box for paged media — margins, size and orientation when content is printed or exported to PDF. It has no effect on screen.
How do I style the first printed page differently?
Use the pseudo-class @page :first { … }, for example to give the opening page a larger top margin.
How do I change the printed page size?
Use the size descriptor, e.g. @page { size: A4 landscape; }.
@media @property