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?
How to set Safari print margins via CSS to print borderless
There is 3 things to take in consideration:
The margin of the page's rule, unfortunately
@page {
margin: 0cm !important;
}Has no effect on Safari 6, where it does in Chrome 23. As I know, as long as Safari is not supporting this, there is no solution (it seems to be fixed to around 10mm).
The page setting as seen here you might have to define a custom "Paper Size" in the "Print…" menu panel without any margin (you did it already btw).
Obviously to take care of the other inner content html, body… not to have any margin.
if internet explorer resize printing page to 60%
There are a few possibilities.
First you can change the page setup of your internet explorer
browser, go to Tools -> Print -> Page setup. Here you can Enable
Shrink-to-Fit.Another way is to convert your webpage to a PDF-file. And then the
PDF-file of your page can be printed.
EDIT
To put one chocolate on one page, use the CSS code below in the chocolate class:
page-break-after:always
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.
How to set ie margins with javascript or vbscript or jquery?
It sounds like you want a CSS print style sheet. See "the definitive guide". P.S. JQuery is a JavaScript library, not a programming language (contrary to the belief of some).
Related Topics
How to Look for Changes in Localstorage in Angular 4
Html5 and JavaScript to Play Videos Only When Visible
Typescript Property Does Not Exist on Type {}
Jquery Wait Until Ajax Call Has Got Data Before Displaying
Webcam Js Error in Chrome: Could Not Access Webcam
How to Filter Date Range in Datatables
How to Disable Button After (Click) in Angular
Get Image from Json File Using JavaScript and Display in HTML Img Tag
Javascript Validation: Block Special Characters
How to Format and Display Json Data Using Array.Map in Reactjs
Reactnativejs: Referenceerror: Can't Find Variable: View
How to Trigger a Click Event on Disabled Elements
How to Wait for Element to Disappear in Cypress
React Router Dom Returns a Blank Page When Going to a Particular Route
Escaping Apostrophe (Single Quote) Character in JavaScript and HTML