My content looks roughly like

	<header>
		<h1>Section Title</h1>
	</header>
	<div class="content">text...</div>

	<header>
		<h1>Section Title</h1>
	</header>
	<div class="content">text...</div>

	<header>
		<h1>Section Title</h1>
	</header>
	<div class="content">text...</div>

I have my headers set to page-break-before: always, and I would like them to touch the very top of the printed page (margin: 0). But if a content section overflows a page, e.g. a paragraph, I don't want it to touch the very top of the next page.

I was thinking to go about this with negative margin on the headers, but that doesn't appear to work.

Is this achievable?

This seems like it should work, I attach an example demonstrating one approach.

1. test.html‎ 2.3 kB