Paged media properties have two print properties as all popular browsers have in common which are
- page-break-before
- page-break-after
Both are discussed
page-break-before Property – The page-break-before property sets the page-breaking behavior before an element. This property cannot be used on absolutely positioned elements. Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders. It’s values are discussed as
| Value | Description |
| auto | Insert a page break before the element if necessary |
| always | Insert a page break before the element |
| avoid | Avoid inserting a page break before the element |
| left | Insert page breaks before the element until it reaches a blank left page |
This property sets the page-breaking behavior to always break before an h1 element as in the example
<html>
<head>
<style>
@media print
{ h1 {page-break-before:always} }
</style> </head>
<body> …. </body>
</html>
The page-break-before property has the ‘auto’ value as its default value.
page-break-after Property – The page-break-after property sets the page-breaking behavior after an element. This property cannot be used on absolutely positioned elements. Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders. It’s values are discussed as
| Value | Description |
| auto | Default. Insert a page break after the element if necessary |
| always | Insert a page break after the element |
| avoid | Avoid inserting a page break after the element |
| left | Insert page breaks after the element until it reaches a blank left page |
This property sets the page-breaking behavior to always break after a table element as
<html>
<head>
<style>
@media print
{ table {page-break-after:always} }
</style> </head>
<body> …. </body>
</html>
