Page Margin Boxes
The CSS specification defines numerous rectangular areas placed in the margins that surround the content of the page. These are called margin boxes and may be used to display static CSS generated content such as page numbers, publication titles, or other artwork.
@top-left {
content: url('company-logo.png');
background-color:red;
}
The following table shows each of the 16 margin boxes (taken from the CSS specification: https://www.w3.org/TR/css3-page/#margin-boxes):
| Box | Description | Placement |
|---|---|---|
| top-left-corner | a fixed-size box defined by the intersection of the top and left margins of the page box | ![]() |
| top-left | a variable-width box filling the top page margin between the top-left-corner and top-center page-margin boxes | ![]() |
| top-center | a variable-width box centered horizontally between the page's
left and right border edges and filling the page top margin between the top-left and
top-right page-margin boxes Note: Using a top-center box together
with a top-left or top-right will create a
sequence of three areas of identical width, with the top-center box
occupying the center. |
![]() |
| top-right | a variable-width box filling the top page margin between the top-center and top-right-corner page-margin boxes | ![]() |
| top-right-corner | a fixed-size box defined by the intersection of the top and right margins of the page box | ![]() |
| left-top | a variable-height box filling the left page margin between the top-left-corner and left-middle page-margin boxes | ![]() |
| left-middle | a variable-height box centered vertically between the page's top and bottom border edges and filling the left page margin between the left-top and left-bottom page-margin boxes | |
| left-bottom | a variable-height box filling the left page margin between the left-middle and bottom-left-corner page-margin boxes | |
| right-top | a variable-height box filling the right page margin between the top-right-corner and right-middle page-margin boxes | ![]() |
| right-middle | a variable-height box centered vertically between the page's top and bottom border edges and filling the right page margin between the right-top and right-bottom page-margin boxes | |
| right-bottom | a variable-height box filling the right page margin between the right-middle and bottom-right-corner page-margin boxes | |
| bottom-left-corner | a fixed-size box defined by the intersection of the bottom and left margins of the page box | ![]() |
| bottom-left | a variable-width box filling the bottom page margin between the bottom-left-corner and bottom-center page-margin boxes | ![]() |
| bottom-center | a variable-width box centered horizontally between the page's
left and right border edges and filling the bottom page margin between the bottom-left
and bottom-right page-margin boxes Note: Using a bottom-center box
together with a bottom-left or bottom-right will
create a sequence of three areas of identical width, with the
bottom-center box occupying the center. |
![]() |
| bottom-right | a variable-width box filling the bottom page margin between the bottom-center and bottom-right-corner page-margin boxes | ![]() |
| bottom-right-corner | a fixed-size box defined by the intersection of the bottom and right margins of the page box | ![]() |
Note: The initial and unset property values are not supported when applied to page
margin boxes.











