page-margin-007-print.html (1346B)
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/#at-page-rule"> 4 <link rel="match" href="page-margin-007-print-ref.html"> 5 <style> 6 @page { 7 size: 400px 200px; 8 margin: 0; 9 } 10 @page :first { 11 margin-left: 50px; 12 } 13 @page :left { 14 margin: 50px; 15 } 16 :root { 17 print-color-adjust: exact; 18 } 19 body { 20 margin: 0; 21 } 22 .container { 23 width: 300px; 24 background: gray; 25 } 26 .container > div { 27 box-sizing: border-box; 28 border: solid; 29 width: 250px; 30 } 31 .left { 32 height: 100px; 33 background: hotpink; 34 } 35 .left::before { 36 content: "Margins on every side."; 37 } 38 .right { 39 height: 200px; 40 background: cyan; 41 } 42 .right::before { 43 content: "No page margins."; 44 } 45 .first { 46 height: 200px; 47 background: yellow; 48 } 49 </style> 50 51 <div class="container"> 52 <div class="first"> 53 Every page should have a colored box as tall as the page area (gray area).<br> 54 This particular page should have a left-margin.<br> 55 There should be 7 pages. 56 </div> 57 <div class="left"></div> 58 <div class="right"></div> 59 <div class="left"></div> 60 </div> 61 <div class="container" style="position:absolute;"> 62 <div class="right"></div> 63 <div class="left"></div> 64 <div class="right"></div> 65 </div>