What is a Page-Margin Box in CSS?

Explanation of page-margin boxes, which are used when working with paged media in CSS.

Page-margin boxes are a part of paged media (e.g. printed paper, transparencies, photo albums, a browser's "Print Preview" function, etc). Page-margin boxes make up the margin area of a page box.

The margin area consists of 16 page-margin boxes as demonstrated in the following diagram.

Diagram of the page-margin boxes within the page context — Diagram of the page box, with the page-margin boxes around its margin.

The styles of each of the page-margin boxes can be controlled with the CSS properties listed above. To use these properties for a page-margin box, you must use the applicable at-rule, which in turn, must be inside the @page at-rule.

For example, you can control the styles of the top-left-corner page-margin box with the @top-left-corner at-rule. As mentioned, you can use any of the above properties to generate content and style its contents.

Example

A common use case for page-margin boxes is to generate header/footer content, such as document title, page numbers, etc.

Here's a basic code example:

Inheritance

Page-margin boxes inherit from the page context. The page context inherits from the root element.

Declarations in the page context (i.e. from styles written with the @page at-rule) can affect the page box and/or inherit to the page-margin boxes, but they do not apply to or inherit into the document's root element or other content.

Margin At-Rules

CSS defines the following at-rules for styling the page-margin boxes.

Page-Margin Properties

CSS defines a subset of CSS properties that can be used to style page-margin boxes. These can override any styles inherited from the page context (which in turn can be inherited from the document root).

Here's a full list of CSS properties that can be used to style page-margin boxes.

Also check out the @page at-rule for more information about how paged media works.