page-box-004-print.html (1185B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties"> 4 <link rel="match" href="page-box-004-print-ref.html"> 5 <!-- In a page context, vertical percentage margins and padding should be 6 resolved against the height of the containing block (unlike regular CSS 7 boxes, which always resolves such percentages against the inline-size of 8 the containing block. --> 9 <style> 10 @page { 11 size: 500px; 12 margin: 5% 10% 15% 20%; 13 padding: 20% 15% 10% 5%; 14 border: 10px solid lightblue; 15 } 16 @page larger { 17 size: 500px 800px; 18 } 19 @page smaller { 20 size: 400px 300px; 21 } 22 :root { 23 print-color-adjust: exact; 24 } 25 body { 26 margin: 0; 27 } 28 </style> 29 <!-- Create two pages for each of the three page types. --> 30 <div style="height:200vh; background:yellow;"> 31 On every page, the yellow rectangle should be centered within the page box 32 (the white area). (The lightblue rectangle should not be centered.) 33 </div> 34 <div style="page:larger; height:760px; background:yellow;"></div> 35 <div style="page:smaller; height:260px; background:yellow;"></div>