The @page at-rule describes aspects of a paged output such as page size and page margins. It applies to printed pages, while ordinary selectors still style the document's content.
Make this comfortable
CSS @page: set a print sheet contract without hiding overflow
When to use it
An incident report is exported for review on standard office paper. A modest page margin keeps evidence away from printer edges; body content must still flow and may occupy several pages. The sample uses a print rule for page margins and a separate print selector for the report's text. Do not use @page to force a long record onto one sheet by shrinking the entire document. Printer dialogs, browser headers, and paper settings can affect the final result. Test A4 and Letter, a one-page case, a long case, and a page containing a large image. Confirm the identifying title and page content remain readable in grayscale.
@page { margin: 18mm; }
@media print { .incident-report { color: #111; background: #fff; max-inline-size: none; } }Cost and verification
Pagination is a real layout pass and may differ among browsers. The cost of extra paper is less important than a missing timestamp or clipped evidence, so preserve complete content first. Print styles cannot guarantee printer hardware supports borderless output or a particular color mode. A page margin is not the same as a margin on the report element; the two can combine. Pair this rule with small-unit break controls where needed, and inspect a generated PDF or print preview before treating the report as an official artifact.
Common Mistakes
- Do not promise identical pagination across browsers and paper settings.
- Do not shrink legal or evidentiary text solely to hit one page.
- Do not confuse page margins with margins on the report element.
Connected lessons
css
reference
web