Others


Others


How to set A4 page size for Print Using CSS


Dimension of A4 Page size is ( 210 mm X 297 mm ) or ( 21cm X 29.7cm ). The following example shows, how to set page size (A4) for print using CSS style.

Example : print.css 
body {
  width: 230mm;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  font-size: 12pt;
  background: rgb(204,204,204); 
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.main-page {
  width: 210mm;
  min-height: 297mm;
  margin: 10mm auto;
  background: white;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
.sub-page {
  padding: 1cm;
  height: 297mm;
}
@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;        
  }
  .main-page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}
Try it Yourself
Example : index.html 
<html>
  <head>
    <title>A4 Page Using CSS</title>
    <link rel="stylesheet" type="text/css" href="print.css">
  </head>
  <body>
    <div class="main-page">
      <div class="sub-page">
        <h3 align='center'>A4 Page in Portrait.(210mm X 297mm)</h3>
      </div>    
    </div>
  </body>
</html>
Try it Yourself

Demo