title: How to Decrease HTML A4 size margin in CSS
body: <p>I have a problem in CSS. I have a CSS code of A4 Size Page. I want to reduce top margin of my A4 size HTML page.</p>
  
  <p>I tried too much time but I failed can anyone one please help me?</p>
  
  <p>Please run the code snippet in full page view to see the correct result of  the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background-color: #F0F0F0;
   font: 12pt "Times New Roman";
      }
      * {
          box-sizing: border-box;
          -moz-box-sizing: border-box;
      }
      .page {
          width: 210mm;
          min-height: 297mm;
          padding: 18mm;
          margin: 5mm auto;
          border: 1px #D3D3D3 solid;
          border-radius: 5px;
          background: white;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    
      }
      .subpage {
          padding: 1cm;
          border: 5px solid;
          height: 257mm;
          outline: 2cm #FFEAEA solid;
      }
      
      @page {
          size: A4;
          margin: 0;
      }
      @media print {
          html, body {
              width: 210mm;
              height: 297mm;  
     -webkit-print-color-adjust: exact    
          }
          .page {
              margin: 0;
              border: initial;
              border-radius: initial;
              width: initial;
              min-height: initial;
              box-shadow: initial;
              background: initial;
              page-break-after: always;
          }
    hr { 
      display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: auto;
      margin-right: auto;
      border-style: inset;
      border-width: 1px;
  border-top: 2px solid #009;
  
  } 
     a:link {
      text-decoration: black;
  }
  
  a:visited {
      text-decoration: black;
  }
  
  a:hover {
      text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
  &lt;div style=" margin:auto; width:60px; height:auto; align: middle"&gt;
      Test Text
      &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>