@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

Next lesson: Page break

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies