Margin while printing html page
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?
CSS print a custom sized page margin when the content is on multiple pages
Please try this:
@media print {
body {
display:table;
table-layout:fixed;
padding-top:2.5cm;
padding-bottom:2.5cm;
height:auto;
}
}
Page Margins for printing in CSS
Both
@page {
margin-top: 5cm;
margin-bottom: 5cm;
}
and
@media print {
body {margin-top: 50mm; margin-bottom: 50mm;
margin-left: 0mm; margin-right: 0mm}
}
work fine in Firefox 35
How to control page margin when printing HTML document?
It's not margin between pages but page margin. It's controlled by a specific CSS media @page
:
@page {
margin: 1cm;
}
Please refer to linked specs for all the details (especially about how @page
combines with, for example, <body>
margins).
Note that with pseudo-selectors you can control the aspect of :left
, :right
and :first
pages (just to mention few common use cases).
How to set margins 0 on print preview?
The best you can do is set @page
margins. Keep in mind, however, that you can and most likely will be overruled if you set margins to 0.
Related Topics
Apply Style to Parent If It Has Child With Css
How to Use Xpath Contains() For Specific Text
How to Draw a Trapezium/Trapezoid with CSS3
CSS Background Image Not Loading
Css3 Border-Radius Clipping Issues
How to Specify a Starting Number for an Ordered List
Setting the Cursor in the Element's Default Styles, or in Element:Hover
Firefox Linux (Centos) Responsive Design Image Scaling
Soft Hyphen in HTML (<Wbr> VS. &Shy;)
How to Disable Google Translate from HTML in Chrome
Style Input Element to Fill Remaining Width of Its Container
How to Auto-Format/Indent Xml/HTML in Notepad++
Use CSS to Remove the Space Between Images
Should I Size a Textarea with CSS Width/Height or HTML Cols/Rows Attributes
Responsive Separator For Horizontal List
Using Base Tag on a Page That Contains Svg Marker Elements Fails to Render Marker