title: Adjust html page in A4 size
body: <p>I want to print a html page in A4 size paper. I use this code:
  CSS</p>
  
  <pre><code>body {
    background: rgb(204,204,204); 
  }
  page {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  }
  page[size="A4"] {  
    width: 21cm;
    height: 29.7cm; 
  }
  page[size="A4"][layout="portrait"] {
    width: 29.7cm;
    height: 21cm;  
  }
  page[size="A3"] {
    width: 29.7cm;
    height: 42cm;
  }
  page[size="A3"][layout="portrait"] {
    width: 42cm;
    height: 29.7cm;  
  }
  page[size="A5"] {
    width: 14.8cm;
    height: 21cm;
  }
  page[size="A5"][layout="portrait"] {
    width: 21cm;
    height: 14.8cm;  
  }
  @media print {
    body, page {
      margin: 0;
      box-shadow: 0;
    }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;page size="A4"&gt;&lt;/page&gt;
  </code></pre>
  
  <p>But I dont have the expecting result. A large gray outline is printed out of the text. Also I want to have the ability to print my page vertical or horizontialm</p>