Expand All | Collapse All

CSS @page rule

Topic: CSS3 Properties ReferencePrev|Next


The @page rule defines the dimensions, orientation, and margins of a page box in a styleSheet, which are used for print previewing and printing Web documents from the browser. Generally, within this construct various CSS properties like size, page, and margin are used to specify the dimensions, orientation, margins, etc. of the page box.

The page box is a rectangular region that contains two areas:

  • The page area. The page area includes the boxes laid out on that page. The edges of the first page area establish the rectangle that is the initial containing block of the document. The canvas background is painted within and covers the page area.
  • The margin area, which surrounds the page area. The page margin area is transparent.


The syntax of this at-rule is given with:

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

The example below shows the @page property in action.

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

Browser Compatibility

The @page rule is poorly supported.

Browsers Icon

Basic Support—

  • Firefox (None)
  • Google Chrome 2+
  • Internet Explorer 8+
  • Apple Safari 5+
  • Opera 6+

Further Reading

See tutorial on: CSS Media Types.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties