Margin while printing html page

Question

I am using a separate style-sheet for printing  Is it possible to set right and left margin in the style-sheet which set the print margin  i e  margin on paper    Thanks

User · Answer

I also recommend pt versus cm or mm as it s more precise  Also  I cannot get  page to work in Chrome  version 30 0 1599 69 m  It ignores anything I put for the margins  large or small  But  you can get it to work with body margins on the document  weird

User · Answer

You should use cm or mm as unit when you specify for printing  Using pixels will cause the browser to translate it to something similar to what it looks like on screen  Using cm or mm will ensure consistent size on the paper    body     margin  25mm 25mm 25mm 25mm      For font sizes  use pt for the print media   Note that setting the margin on the body in css style will not adjust the margin in the printer driver that defines the printable area of the printer  or margin controlled by the browser  may be adjustable in print preview on some browsers     It will just set margin on the document inside the printable area    You should also be aware that IE7   automatically adjusts the size to best fit  and causes everything to be wrong even if you use cm or mm  To override this behaviour  the user must select  Print preview  and then set the print size to 100   default is Shrink To Fit     A better option for full control on printed margins is to use the  page directive to set the paper margin  which will affect the margin on paper outside the html body element  which is normally controlled by the browser  See http   www w3 org TR 1998 REC-CSS2-19980512 page html  This currently works in all major browsers except Safari   In Internet explorer  the margin is actually set to this value in the settings for this printing  and if you do Preview you will get this as default  but the user can change it in the preview    page          size  auto       auto is the initial value             this affects the margin in the printer settings         margin  25mm 25mm 25mm 25mm        body             this affects the margin on the content before sending to printer         margin  0px         Related answer  Disabling browser print options  headers  footers  margins  from page

User · Answer

I d personally suggest using a different unit of measurement than px  I don t think that pixels have much relevance in terms of print  ideally you d use    point  pt  centimetre  cm    I m sure there are others  and one excellent article about print-css can be found here  Going to Print  by Eric Meyer

User · Answer

If you know the target paper size  you can place your content in a DIV with that specific size and add a margin to that DIV to simulate the print margin  Unfortunately  I don t believe you have extra control over the print functionality apart from just show the print dialog box

User · Answer

Updated  Simple Solution   media print      body          display  table         table-layout  fixed         padding-top  2 5cm         padding-bottom  2 5cm         height  auto           Old Solution  Create section with each page  and use the below code to adjust margins  height and width   If you are printing A4 size   Then user  Size   8 27in and 11 69 inches   page Section1       size  8 27in 11 69in       margin   5in  5in  5in  5in       mso-header-margin   5in       mso-footer-margin   5in       mso-paper-source  0       div Section1       page  Section1       then create a div with all your content in it     lt div class  Section1  gt       type your content here      lt  div gt

User · Answer

Firstly said  I try to force all my users to use Chrome when printing because other browsers create different layouts    An answer from this question recommends     page     size  210mm 297mm        Chrome sets own margins  we change these printer settings      margin  27mm 16mm 27mm 16mm       However  I ended up using this CSS for all my pages to be printed     media print         page         size  A4     DIN A4 standard  Europe          margin 0            html  body           width  210mm             height  297mm             height  282mm          font-size  11px          background   FFF          overflow visible            body           padding-top 15mm                Special case  Long Tables  When I needed to print a table over several pages  the margin 0 with the  page was leading to bleeding edges      I could solve this thanks to this answer with    table   page-break-inside auto   tr      page-break-inside avoid  page-break-after auto   thead   display table-header-group    tfoot   display table-footer-group      Plus setting the top-bottom-margins for  page     page        size  auto      margin  20mm 0 10mm 0    body       margin 0      padding 0      Result      I would rather prefer a solution that is concise and works with all browser  For now  I hope the information above can help some developers with similar issues

[html] Margin while printing html page

Examples related to html

Examples related to css

Examples related to printing

Examples related to stylesheet