default top margin prints on first page only.

[Anonymous]

This is really odd. Whatever html / css strategy I use, the first page prints as if it has a top margin, whereas the remaining pages do not. (At least all of the remaining pages that contain images. The ones that have text may as well, but I cannot determine that.)
The latest desperation of many renditions uses flexbox css against (old) html tables.

Here is the css code. (Note that the print stylesheet is separate because the @print element did not work for me in Chrome)

        <style type="text/css">
            td {
                width: 45%;
                margin: 1%;
            }
            td img {
                display: block;
                width: 100%;
            }
            ul {
                height: 5.25in;
                padding: 15%;
                flex-direction: column;
            }
            li {
                text-align: center;
                list-style: none;
            }
            .facts {
                width: 70%;
            }
            tr, ul {
                display: flex;
                justify-content: space-around;
            }
        </style>
        <style type="text/css" media="print">
                .table-page {
                    page-break-after: always;
                }
        </style>

and here is a excerpt of the page (after PHP processing)

 <table class="table-page">
                <tr>
                    <td><img src="albatross.png" alt="Albatross"></td>
                    <td><img src="beaver.png" alt="Beaver"></td>
                </tr>
                <tr>
                    <td><img src="blackbear.png" alt="Black Bear"></td>     <td><img src="cat.png" alt="Cat"></td>
                </tr>
            </table>
            
            <table class="table-page">
                <tr>
                    <td class="facts">
                        <ul>
                            <li>Known as "Busiest Animal" that is constantly changing its habitat.</li><li>Lives in lodges made of branches and mud.</li><li>It's the largest rodent.</li>                        </ul>
                    </td>
                    <td class="facts">
                        <ul>
                            <li>The largest of flying birds with a wingspan of up to 12 feet.</li><li>Swoops over the water then dives in to catch its prey.</li><li>Eats squid, octopus and other fish.</li>                        </ul>
                    </td>
                </tr>
                <tr>
                    <td class="facts">
                        <ul>
                            <li>Sleeps 13 to 14 hours a day.</li><li>Heaviest on record weighed 50 pounds.</li><li>Has powerful night vision.</li>                        </ul>
                    </td>
                    <td class="facts">
                        <ul>
                            <li>Excellent tree climber.</li><li>Eats all summer to hibernate in the winter.</li><li>Loves honey.</li>                        </ul>
                    </td>                                                                                                                                                                                                           
                </tr>
            </table>
            <table class="table-page">
                <tr>
                    <td><img src="cheetah.png" alt="Cheetah"></td>
                    <td><img src="bookcover.png" alt="bookcover"></td>
                </tr> ...

I generate each page through PHP. Odd pages contain images, even pages contain text that will print behind the odd pages when printed duplex.

BTW I prefer the extra space at the top of the page.