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.