page-box-005-print-ref.html (936B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 400px; 6 margin: 0; 7 } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { 12 margin: 0; 13 } 14 .pagebox { 15 display: flex; 16 break-before: page; 17 height: 400px; 18 } 19 .pagearea { 20 margin: 50px; 21 border: 10px dotted; 22 padding: 20px; 23 } 24 </style> 25 <div class="pagebox"> 26 <div class="pagearea" style="border-color:orange;"> 27 White background (including page margins). Orange dotted border. Black text. 28 </div> 29 </div> 30 <div class="pagebox" style="background:yellow;"> 31 <div class="pagearea" style="border-color:hotpink;"> 32 Yellow background (including page margins). Hotpink dotted border. Black text. 33 </div> 34 </div> 35 <div class="pagebox" style="background:cyan;"> 36 <div class="pagearea"> 37 Cyan background (including page margins). Black dotted border. Black text. 38 </div> 39 </div>