title: HTML CSS print out POS size?
body: <p>I am trying to print out <code>POS</code> template from the browser. When I click on <code>CTRL+P</code>, 
  it prints the whole page.</p>
  
  <p><a href="https://i.stack.imgur.com/V6ZoM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V6ZoM.png" alt="enter image description here"></a></p>
  
  <p>I want to print only the receipt without margins or padding in printing out, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/BYkMK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BYkMK.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" &gt;
  
  &lt;head&gt;
  
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /&gt;
    &lt;link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /&gt;
    &lt;title&gt;CodePen - POS Receipt Template Html Css&lt;/title&gt;
  
    &lt;style&gt;
  @media print {
      .page-break { display: block; page-break-before: always; }
  }
        #invoice-POS {
    box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);
    padding: 2mm;
    margin: 0 auto;
    width: 44mm;
    background: #FFF;
  }
  #invoice-POS ::selection {
    background: #f31544;
    color: #FFF;
  }
  #invoice-POS ::moz-selection {
    background: #f31544;
    color: #FFF;
  }
  #invoice-POS h1 {
    font-size: 1.5em;
    color: #222;
  }
  #invoice-POS h2 {
    font-size: .9em;
  }
  #invoice-POS h3 {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 2em;
  }
  #invoice-POS p {
    font-size: .7em;
    color: #666;
    line-height: 1.2em;
  }
  #invoice-POS #top, #invoice-POS #mid, #invoice-POS #bot {
    /* Targets all id with 'col-' */
    border-bottom: 1px solid #EEE;
  }
  #invoice-POS #top {
    min-height: 100px;
  }
  #invoice-POS #mid {
    min-height: 80px;
  }
  #invoice-POS #bot {
    min-height: 50px;
  }
  #invoice-POS #top .logo {
    height: 60px;
    width: 60px;
    background: url(http://michaeltruong.ca/images/logo1.png) no-repeat;
    background-size: 60px 60px;
  }
  #invoice-POS .clientlogo {
    float: left;
    height: 60px;
    width: 60px;
    background: url(http://michaeltruong.ca/images/client.jpg) no-repeat;
    background-size: 60px 60px;
    border-radius: 50px;
  }
  #invoice-POS .info {
    display: block;
    margin-left: 0;
  }
  #invoice-POS .title {
    float: right;
  }
  #invoice-POS .title p {
    text-align: right;
  }
  #invoice-POS table {
    width: 100%;
    border-collapse: collapse;
  }
  #invoice-POS .tabletitle {
    font-size: .5em;
    background: #EEE;
  }
  #invoice-POS .service {
    border-bottom: 1px solid #EEE;
  }
  #invoice-POS .item {
    width: 24mm;
  }
  #invoice-POS .itemtext {
    font-size: .5em;
  }
  #invoice-POS #legalcopy {
    margin-top: 5mm;
  }
  
      &lt;/style&gt;
  
    &lt;script&gt;
    window.console = window.console || function(t) {};
  &lt;/script&gt;
  
  
  
    &lt;script&gt;
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body translate="no" &gt;
  
  
    &lt;div id="invoice-POS"&gt;
  
      &lt;center id="top"&gt;
        &lt;div class="logo"&gt;&lt;/div&gt;
        &lt;div class="info"&gt; 
          &lt;h2&gt;SBISTechs Inc&lt;/h2&gt;
        &lt;/div&gt;&lt;!--End Info--&gt;
      &lt;/center&gt;&lt;!--End InvoiceTop--&gt;
  
      &lt;div id="mid"&gt;
        &lt;div class="info"&gt;
          &lt;h2&gt;Contact Info&lt;/h2&gt;
          &lt;p&gt; 
              Address : street city, state 0000&lt;/br&gt;
              Email   : JohnDoe@gmail.com&lt;/br&gt;
              Phone   : 555-555-5555&lt;/br&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!--End Invoice Mid--&gt;
  
      &lt;div id="bot"&gt;
  
                      &lt;div id="table"&gt;
                          &lt;table&gt;
                              &lt;tr class="tabletitle"&gt;
                                  &lt;td class="item"&gt;&lt;h2&gt;Item&lt;/h2&gt;&lt;/td&gt;
                                  &lt;td class="Hours"&gt;&lt;h2&gt;Qty&lt;/h2&gt;&lt;/td&gt;
                                  &lt;td class="Rate"&gt;&lt;h2&gt;Sub Total&lt;/h2&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;tr class="service"&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;Communication&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;5&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;$375.00&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;tr class="service"&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;Asset Gathering&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;3&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;$225.00&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;tr class="service"&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;Design Development&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;5&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;$375.00&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;tr class="service"&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;Animation&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;20&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;$1500.00&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;tr class="service"&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;Animation Revisions&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;10&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="tableitem"&gt;&lt;p class="itemtext"&gt;$750.00&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
  
                              &lt;tr class="tabletitle"&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td class="Rate"&gt;&lt;h2&gt;tax&lt;/h2&gt;&lt;/td&gt;
                                  &lt;td class="payment"&gt;&lt;h2&gt;$419.25&lt;/h2&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;tr class="tabletitle"&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td class="Rate"&gt;&lt;h2&gt;Total&lt;/h2&gt;&lt;/td&gt;
                                  &lt;td class="payment"&gt;&lt;h2&gt;$3,644.25&lt;/h2&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                          &lt;/table&gt;
                      &lt;/div&gt;&lt;!--End Table--&gt;
  
                      &lt;div id="legalcopy"&gt;
                          &lt;p class="legal"&gt;&lt;strong&gt;Thank you for your business!&lt;/strong&gt;  Payment is expected within 31 days; please process this invoice within that time. There will be a 5% interest charge per month on late invoices. 
                          &lt;/p&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;&lt;!--End InvoiceBot--&gt;
    &lt;/div&gt;&lt;!--End Invoice--&gt;
  
  
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea how to achieve this ?</p>