CSS page-break Property
The CSS page-break property is a set of three properties:page-break-before, page-break-after and page-break-inside. Read about property, see examples.
There is no single page-break property in the CSS specification. The name refers to a family of three related properties: page-break-before, page-break-after, and page-break-inside. Together they control where a page breaks when a document is sent to a printer (or saved as a PDF), so you can keep related content together and avoid splitting headings, tables, or images across two sheets.
These properties only take effect in paged media — printing or print preview. They have no visible result on a normal screen, so you almost always set them inside a @media print block. They also have no effect on an empty <div> or on absolutely positioned elements.
This page covers all three properties, when to reach for each one, and the modern replacements you should prefer in new code.
When would I use this?
Common reasons to control page breaks:
- Start each section on a fresh page — e.g. force a page break before every
<h1>in a long report. - Keep blocks together — stop a table, figure, or code block from being split across two pages.
- Avoid orphaned headings — a heading that lands at the very bottom of a page with its content on the next one looks broken.
Modern replacements: the break-* properties
The page-break-* properties are legacy. The CSS Fragmentation spec replaced them with the shorter break-before, break-after, and break-inside properties, which also work for multi-column and region layouts — not just printing. Browsers still support the old names for backward compatibility and map them onto the new ones, so the simplest robust approach is to declare both:
@media print {
h1 {
page-break-before: always; /* legacy */
break-before: page; /* modern equivalent */
}
}The rest of this page shows each legacy property next to its modern equivalent.
page-break-after
page-break-after adds a page break after an element. For example, ending a chapter so the next one starts on a new sheet:
The page-break-after property is replaced by the break-after property.
CSS page-break-after code example
@media print {
.chapter {
page-break-after: always;
/* modern equivalent: break-after: page; */
}
}page-break-before
page-break-before adds a page break before an element — handy for making every major heading start a new page:
The page-break-before property is replaced by the break-before property.
CSS page-break-before code example
@media print {
h2 {
page-break-before: always;
/* modern equivalent: break-before: page; */
}
}The left and right values are useful for double-sided printing: they force enough breaks so the next element starts on a left-hand or right-hand page respectively.
page-break-inside
page-break-inside controls whether a break is allowed inside an element. Use avoid to keep a table, figure, or paragraph from being split across two pages. It only accepts auto and avoid.
The page-break-inside property is replaced by the break-inside property.
Example of the break-inside property:
The following example uses the modern break-inside property, which replaces the deprecated page-break-inside.
CSS page-break and break-inside properties example|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| auto | Let the browser decide where to break. This is the default value. |
| always | Always force a page break (before or after the element). |
| avoid | Avoid a page break (before, after, or inside the element). |
| left | Force one or two breaks so the following content starts on a left-hand page. |
| right | Force one or two breaks so the following content starts on a right-hand page. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parent element. |
Which values apply to which property:
| Property | Accepted values |
|---|---|
page-break-before | auto, always, avoid, left, right |
page-break-after | auto, always, avoid, left, right |
page-break-inside | auto, avoid |
Related topics
break-after— the modern replacement forpage-break-after.break-inside— the modern replacement forpage-break-inside.@media— used to target print output with@media print.columns— multi-column layout, wherebreak-insideis also useful.