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.
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.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
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.