Quote:
Originally Posted by Psymon
The only little "quirk" that I found was that for the <h1> heading that comes after that full-page image, I'd set the style to include top-margin:42px, so that all those <h1> titles would be moved down a bit from the top of the page. That seems to end up getting ignored, though, if I have the code for the full-page image before it, and so what I did was "manually" set the style for that particular <h1> tag to margin-top:0, and then put a <p> tag above it with a line-height:42px.
|
Do you set a manual pagebreak (page-break-before/after:always) between the image and the <h1>? If you do, this is known and allowed behaviour: vertical margins at forced pagebreaks can be ignored.
Two other solutions:
- Use padding-top instead of margin-top. Padding should not be ignored. (Not an option if you have borders or background, though.)
- Use a dummy element after the pagebreak. This is something like your solution, but keep your margin-top in the <h1>. Or actually use the dummy element to introduce the pagebreak:
Code:
<div class="full-page-image">
<img ... />
</div>
<div class="pagebreak" style="page-break-before:always; height:0; margin:0; padding:0"></div>
<h1 style="margin-top:42px">Title</h1>