I have this simple HTML code with minimum style for printing:
<html>
<head>
<style>
@media print {
@page {
margin: 20mm 20mm;
}
h1 {
margin-top: 20mm;
}
}
</style>
</head>
<body>
<h1>Title</h1>
<p>asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer</p>
<p>asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer</p>
<h1>Title</h1>
<p>asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer</p>
<p>asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer asdf qwer</p>
</body>
</html>
When I print the page it looks like this (without the green/red annotations, of course):
Note how the first title has a big top margin: first the page margin then its own top margin.
The real document is much longer and I would like to automatically:
- Keep the margin above all headers when there is text or other content above
- Remove the margin above all headers when they are the first element of the printed page, since there is already a page margin
How can I do that?
