CSS @page Rule

The @page rule defines the size, direction, and page margins of the page box in the styleSheet, used for print preview and printing web documents from the browser. Usually, in this construction, various CSS properties (such as size, page, and margin) are used to specify the size, direction, and margins of the page box.

The page box is a rectangular area that contains two regions:

• ThePage area. The page area includes the boxes arranged on the page. The edges of the first page area establish a rectangle, which is the initial containing block of the document. The canvas background is drawn within it and covers the page area.

• InEdge area, surrounding the page area. The margin area is transparent.

CSS @page rule usage syntax

The syntax of this rule is as follows:

@page[:left | :right | :first] {
　　　　/*　print-specific rules　*/
}

The following example demonstrates how to use the @page attribute.

@page {
margin:　2in;　/*　default for all pages　*/
}
@page:left {
margin:　1in;　/*　margin on the left page　*/
}
@page:right {
margin:　3in;　/*　margin on the right page　*/
}
@page:first {
margin-top:　5in;　/*　top margin on the first page　*/
}

Browser compatibility

The @page rule is not well supported.

Further reading

Please refer to the following tutorials:CSS Media Types.