@page rule
Learn page size with the @page rule.
What is the @page declaration?
You set the printed page's size and margins with the @page declaration. It starts with the @page keyword and a block holding size and margin. For example, @page { size: A4; margin: 2cm; } makes every page A4.
@page only takes effect in the print dialog and paged preview; it does nothing on screen. It is your main lever for print layout.
The size property
The size property tells the printer the paper size and orientation. You can give a keyword or two values: A4, letter, landscape, portrait. Example: @page { size: A4 landscape; }.
For a custom size, two lengths also work: size: 148mm 210mm. That gives an A5-like sheet. The print dialog follows this value.
The margin property
The margin property sets the print margin. @page { margin: 2cm; } leaves two centimeters on every side. A single value applies to all four sides; two values set vertical and horizontal; four values go top, right, bottom, left.
A large margin shrinks the content; a small one may run off the paper edge. Stay at 1.5cm or above to clear the printer's physical edge.
Exercise Write an A4 landscape page setup
Write an @page declaration. The size property is A4 landscape, the margin property is 1.5cm. Place both inside the same @page block.
Show example solution
/* A4 landscape page setup */
@page {
size: A4 landscape;
margin: 1.5cm;
}Test yourself
-
What does the @page declaration set?
@page { size: A4; margin: 2cm; }- Page size and margin
- Only the text color
- Only the line height
- Only the screen resolution
Show answer
Page size and margin — Correct. The @page declaration sets size for the page and margin for the print margin.
-
Complete the size value
@page { size: ____; margin: 2cm; }Show answer
@page { size: A4 portrait; margin: 2cm; } -
Match each piece to its meaning
- size: A4
- Page size
- margin: 2cm
- Print margin
- size: landscape
- Landscape orientation
- @page
- Page declaration