CSS page-break-before Property

The CSS page-break-before property controls whether a page break is forced, avoided, or left automatic before a given element when the document is printed or displayed in any paged-media context (printing, PDF export, print preview).

On a normal screen, web content flows in one continuous scroll, so there is nothing to break. But when that same page is sent to a printer or saved as a PDF, the browser has to decide where one sheet of paper ends and the next begins. page-break-before lets you influence those decisions — for example, to start each chapter heading at the top of a fresh page, or to keep content together.

The property has no visible effect on screen; you typically place it inside an @media print block so the rules apply only when the document is printed. It does not apply to absolutely positioned elements.

Syntax

page-break-before: auto | always | avoid | left | right | initial | inherit;

Example: start every chapter on a new page

A common use is forcing every top-level heading to begin on its own printed page. Apply page-break-before: always to each h2 so a fresh page starts before it:

@media print {
  h2 {
    page-break-before: always;
  }
}

<h2>Chapter 1</h2>
<p>Content of chapter one...</p>

<h2>Chapter 2</h2>
<p>Content of chapter two...</p>

When printed, "Chapter 2" begins at the top of a new page, even if "Chapter 1" left room on the current page.

Example: force a left-hand or right-hand page

For double-sided printed documents (books, reports), you can control which side of a spread the element starts on. Use left or right to force an odd or even page before the element:

@media print {
  .chapter-start {
    page-break-before: right; /* start on a right-hand (odd) page */
  }
}

If the element would already start on a right-hand page, the browser inserts a blank page to push it to the next right-hand page. This is the same behavior used by typesetting software for chapter openings in books.

Example: suppress unwanted breaks

Use avoid to discourage a break immediately before an element. This is useful for preventing an introductory paragraph from being separated from the heading above it:

@media print {
  h2 + p {
    page-break-before: avoid;
  }
}

Note that avoid is a hint, not a guarantee. If there is no other reasonable place to break the page, the browser may still insert a break.

Values

The left and right values are intended for double-sided printing, where you want content to begin on a specific side of the spread.

Browser support and gotchas

• All major browsers support auto, always, and avoid. Support for left and right is less consistent across browsers and PDF renderers.
• The property is ignored on inline elements and absolutely or fixedly positioned elements. Target block-level elements like <div>, <section>, <h1>–<h6>, or <p>.
• Setting page-break-before: always on every element of a list or table can produce many short pages. Use it selectively on logical section boundaries.
• page-break-before on a child element is applied to the closest block-level box it generates — not to the parent container.

Tip: pair with the other page-break properties

page-break-before is one of three legacy properties for print layout. Use them together for full control:

• page-break-after — controls breaks after an element.
• page-break-inside — prevents an element (a table, figure, or code block) from being split across two pages.

For modern code, migrate to the equivalent fragmentation properties:

• break-before — replaces page-break-before.
• break-after — replaces page-break-after.
• break-inside — replaces page-break-inside.

See the @media print guide for tips on building a complete print stylesheet, and the orphans and widows properties for controlling how many lines of a paragraph are left on a page before or after a break.

Practice