page-margin-007-print-ref.html (1521B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 400px 200px; 6 margin: 0; 7 } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { 12 margin: 0; 13 } 14 .pagebox { 15 display: flow-root; 16 } 17 .pagebox > div { 18 width: 300px; 19 background: gray; 20 } 21 .pagebox > div > div { 22 box-sizing: border-box; 23 border: solid; 24 width: 250px; 25 height: 100%; 26 } 27 .left { 28 margin: 50px; 29 height: 100px; 30 } 31 .left > div { 32 background: hotpink; 33 } 34 .left > div::before { 35 content: "Margins on every side."; 36 } 37 .right { 38 height: 200px; 39 } 40 .right > div { 41 background: cyan; 42 } 43 .right > div::before { 44 content: "No page margins."; 45 } 46 .first { 47 height: 200px; 48 margin-left: 50px; 49 } 50 .first > div { 51 background: yellow; 52 } 53 </style> 54 55 <div class="pagebox"> 56 <div class="first"> 57 <div> 58 Every page should have a colored box as tall as the page area (gray area).<br> 59 This particular page should have a left-margin.<br> 60 There should be 7 pages. 61 </div> 62 </div> 63 </div> 64 <div class="pagebox"> 65 <div class="left"><div></div></div> 66 </div> 67 <div class="pagebox"> 68 <div class="right"><div></div></div> 69 </div> 70 <div class="pagebox"> 71 <div class="left"><div></div></div> 72 </div> 73 <div class="pagebox"> 74 <div class="right"><div></div></div> 75 </div> 76 <div class="pagebox"> 77 <div class="left"><div></div></div> 78 </div> 79 <div class="pagebox"> 80 <div class="right"><div></div></div> 81 </div>