A4 CSS page template

A4 CSS page template.markdown

A4 CSS page template

basic CSS template for A4 print

Forked from rafaelcastrocouto's Pen A4 CSS page template.

A Pen by Dermot McGuire on CodePen.

License.

index.html

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  border: 1.25cm solid #000;
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

how to break the content to the next page automatically?

Nice template,
is there a way to add a header and footer on each page?

when print this layout . Is it printed perfect ?

Great stuff, thanks for the links as well.

Just a note that <page> is not a 'real' html tag, and might be better replaced with a div: https://stackoverflow.com/questions/37196261/html-what-is-the-page-tag-doing