Margin Boxes

Around your content, the margins of a page are divided into 16 Margin Boxes. You can style and populate these boxes with any content you like, such as Headers & Footers and Page Numbers.

The default size of your Margin Boxes is controlled by the margin CSS property on the @page, however you can override their size.

Add text content to a margin box

For simple, string-only content, you can set the content CSS property.


@page {
  @top-center {
    content: "Hello, World!";
    color: red;
  }
}

For example, you may want to add a page number to the bottom-right corner of each page.


@page {
  @bottom-right {
    content: counter(page);
    font-size: 16px;
  }
}

For more examples, see Page Numbers.

Add HTML content to a margin box

For HTML content, you can set the content of the margin box to an element() function which references a running element.

In your HTML, add an element to the body that you want to use in your margin box. It doesn’t matter where you add it within your body, as it will be removed and placed in the margin box.


<html>
  <body>
    <div class="my-repeated-content">Repeats on <em>every</em> page</div>
    <div>This will stay in the content of your page.</div>
  </body>
</html>

Now, in the CSS, set the position of your new HTML element to use the running() function. This takes a custom identifier as its only argument.

Set an identifier that makes sense, and use that same identifier in the content property of your margin box.


.my-repeated-content {
  position: running(myRunningContent);
}

@page {
  @top-left {
    content: element(myRunningContent);
  }
}

Overriding height and width of margin boxes

The height and width of the margin boxes are automatically computed. However, you can override these values using the height and width properties.


@page {
  @top-left {
    height: 10mm;
    width: 20%;
  }
}

Default alignment of margin box content

By default, the content of a margin box is horizontally and vertically aligned according to some sensible defaults (see table below).

You can override this alignment using the text-align and vertical-align properties. For example, to override the alignment of content in the @top-left margin box.


@page {
  @top-left {
    text-align: right;
    vertical-align: middle;
  }
}

Margin Box	`text-align`	`vertical-align`
@top-left-corner	right	middle
@top-left	left	middle
@top-center	center	middle
@top-right	right	middle
@top-right-corner	left	middle
@left-top	center	top
@left-middle	center	middle
@left-bottom	center	bottom
@right-top	center	top
@right-middle	center	middle
@right-bottom	center	bottom
@bottom-left-corner	right	middle
@bottom-left	left	middle
@bottom-center	center	middle
@bottom-right	right	middle
@bottom-right-corner	left	middle