The page break properties determine whether page breaks should be enforced or prevented for an element. There are three different types of page breaks available:

You can use the property page-break-after to specify whether page breaks are allowed after the element they are defined for.

The following code will enforce a page break after the div with the class selector "1", no matter if one is required or not:

div.1 { page-break-after: always; }

As you can see, a page break was inserted after the first div element.

Conversely, you can prohibit a page break after an element using this code:

div.1 { page-break-after: avoid; }

In the example above, the first div is moved to the second page as there is not enough space on the first page for both divs, and no page breaks are allowed after the first div.

All page-break properties can be used in the manner illustrated above. You can use the properties page-break-before and page-break-after to enforce or prohibit page breaks before resp. after an element. You can only use the page-break-inside property to prohibit page breaks inside an element.

When using page-break-before in the following case, a page break is inserted before every ordered list.

ol { page-break-before: always }

In order to avoid a page break, you can use the "avoid" value. In this example, no page break will be inserted after a table:

table { page-break-after: avoid }

In the following example, page breaks are neither enforced nor forbidden inside paragraphs, they are inserted automatically as required:

p { page-break-inside: auto }