A page box represents a rectangular region made of two areas; the page area and the margin area. The page area is actually the rectangular that makes the initial containing block of the document (the content) while the margin area is the one that surrounds the page area and it is transparent.

The margins of a page box are defined with the selector @page rule. Such a "@page rule" consists of the keyword @page, followed by an optional page selector which is also followed by a block containing declarations and further @ rules. Comments and white spaces allowed and optional.

Page margins

To define page margins, CSS margin-properties may be applied within the page content. Due to the fact that the page context is not related to the notion of fonts, relative units such as em or ex must not be applied to set the page margin. Negative values are allowed but the browser or printer may cut the content during rendering.

The diagram below visualizes a typical relationship between page box, page margin and sheet:

CSS media - page margins









Page selectors, :left, :right and :first

When working with the double-sided documents, the page boxes on the left and the right side may have different dimensions. This is usually handled with the CSS pseudo-classes called :left and :right pseudo classes.

The first page orientation, whether it's left or right, depends on the major writing direction of the root element; i.e. the first page of a document with a left-to-right writing direction would be a right page, and the other way around. To force the document to start as a left or right page, a page-break may be inserted before the first box. To force the first page style a pseudo-class :first may be used. Properties specified with the :left and :right @page rule override other that are specified in a @page rule without pseudo-classes. Further, properties specified with the :first @page rule override these specified with the :left and :right @page rules.

To avoid material being cut and lost due special designing situation such as using <pre> tag or displacing content boxes with absolute positioning and so on, try to make content box somewhat smaller then the page box to prevent overflowing and don't position content intended for printing in strange places in order to avoid rendering.


Example with CSS page boxes:


›› go to examples ››