Page Layout

This page covers how to control the structure and layout of your PDF pages: sizing, margins, single-page containers, full-page backgrounds, and page breaks. For styling your content with CSS, see Custom CSS.

Page Size and Margins

You can change the size of your Document’s pages in the Template Settings tab. Select one of the predefined sizes, or set a custom one that precisely fits what you need.

Sizes are expressed in millimeters. If you need inches, 1 in = 25.4 mm.

Default Page Sizes in Pixels

For Templates Using Engine v5

For Templates Using Older Engines

Adding Margins

You can add margins at the top, left, right, and bottom of your Document in the Settings tab of the template.

When to use margins: If you are defining a header and/or footer in the settings, you will need to give them space by adding margin at the top and/or bottom. If you have a very simple document and want nice margins around it, that works too.

When not to use margins: If you need a full-page background color or image, margins will reduce the printed content size and prevent the color or image from going border to border. If you are making a presentation-style document and need each content page to fill an entire page using the pixel sizes listed above, do not use margins or it will mess things up.

Single-Page Layout

If you want to make a container that always takes an entire page — no more, no less — you can define it like so:

.page {
  /* Defining an A4 portrait page */
  height: 1120px;
  width: 793px;

  /* Will prevent any content like large images from messing */
  /* with printed content auto-scaling */
  overflow: hidden;

  /* Will allow any absolutely positioned content to be */
  /* placed relatively to the page by default */
  position: relative;
}

You can then use it in your HTML:

<div class="page">
  Content for a single page
</div>

Using a Full-Page Background

If you want to apply a background so it takes the entire page, use the technique above and set the background image on your page:

.page-with-bg {
  background-image: url('some-background-url-or-datauri');
  background-size: cover;
}

<div class="page page-with-bg">
  Content for a single page
</div>

Page Breaks

Forcing a Page Break

The simplest way to force a page break is using CSS. You can use the page-break-before property to define a class like this:

.page-break {
  page-break-before: always;
}

You can then apply this class to any element you want to insert a page break before.

Preventing a Page Break

If you want to avoid a section of your document from being broken between pages, you can use the page-break-inside CSS property:

.avoid-page-break {
  page-break-inside: avoid;
}

If you apply this class to an element, it will have no effect for an element in the middle of the page, but if it risks being broken between two pages, a page break will be inserted before it.

Frequently asked questions

What is the A4 page size in pixels for PDFMonkey templates?

On engine v5, an A4 page is 795×1123 pixels. On older engines (v2–v4), it is 793×1120 pixels. US Letter is 815×1056 (v5) or 815×1055 (older engines).

How do I force a page break in a PDFMonkey PDF?

Add a CSS class with page-break-before: always and apply it to any element where you want the break. For example: .page-break { page-break-before: always; }.

How do I make a full-page background in a PDFMonkey template?

Create a container sized to exactly one page (e.g., 793×1120px for A4), set overflow: hidden and position: relative, then apply a background-image with background-size: cover. Do not use page margins or they will shrink the content area.

How do I prevent content from splitting across pages?

Apply the CSS property page-break-inside: avoid to any element you want to keep on a single page. If the element would be split, a page break is inserted before it instead.