🎯 CSS page-break-before Property

The page-break-before property determines whether a new page should be forced or prevented before a specific HTML element when printing a web document.

This property is specifically designed for print style sheets (`@media print`). It allows developers to create structured, book-like printed layouts from web pages by controlling exact pagination boundaries.

This property controls printing layout behavior using the following core values:

This is the default value. The browser automatically determines pagination based on standard document flow. It inserts a page break only when the content naturally overflows the printing area.

.section {
    page-break-before: auto;
}
                

Forces the printer to always start a brand new page immediately before the specified element. This ensures that the element will always appear at the very top of a fresh sheet of paper.

h1.new-chapter {
    page-break-before: always;
}
                

Resets the property back to its default CSS value, causing it to act exactly like auto.

.box {
    page-break-before: initial;
}
                

When a user prints a comprehensive report, you may want each major section or new invoice to start on a fresh page rather than getting cut awkwardly in half:

@media print {
    
    /* Force every major heading or section to start on a new printed page */
    .print-invoice, 
    .report-chapter {
        page-break-before: always;
    }

}
                

Optimizing web pages for printing is an essential aspect of professional web design and user accessibility:

• Prevents critical content like headers, charts, or signature fields from being split across two separate pages.
• Allows you to build clean multi-page printable assets like PDFs, invoices, certificates, and reports directly from HTML.
• Significantly enhances corporate and professional user satisfaction when documents are physicalized.