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.
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?
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
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;
}
}
Print preview margin of print-hidden part in chrome new version
first check the fiddle
https://jsfiddle.net/ceh185bw/11/
I did 2 things ,
1- put the print at botom
2- over ride the margin for container
#sidebar {
width: 200px!important;
opacity: 1;
position: fixed;
border: 3px solid;
}
#main-container {
margin-left: 200px!important;
border: 3px solid;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{
display:none !important;
}
#main-container {
margin-left: 0px!important;
border:1px solid;
border: 3px solid;
}
#main-container {
margin-left: 0px!important;
}
}
Margin and padding issue when doing window.print
The Problem
It's most likely because you've set the visibility your drawer and your navbar (the left-side navigation and the top-side navigation) to hidden. When something's visibility is set to hidden
, it is still in the layout and preserves its height, width, margin, and padding. This is why you're seeing the space of your drawer and navbar, respectively causing the space on the left side and the top side.
You can run and try printing the below screen. You'll see the problem I mentioned (the space caused by the preserved sizes [height, width, padding, margin]).
@media print { body, html, #wrapper { width: 100%; margin: 0px; padding: 0px; border: 1px solid red; } #drawer { visibility: hidden; } #navbar { visibility: hidden; } .no-print { display: none; }}
* { box-sizing: border-box; margin: 0; padding: 0;}
html,body { position: relative; width: 100%; height: 100%;}
#wrapper { display: flex; flex-direction: row; height: 100%; width: 100%;}
#navbar { width: 100%; background: blue; color: white; padding: 20px;}
#section--right { flex-grow: 1;}
#drawer { height: 100%; width: 100px; background: red; color: white; padding: 20px;}
#navbar .text { display: inline-block; height: 50px; background: #121212;}
<div id="wrapper"> <div id="drawer">Some drawer</div>
<div id="section--right"> <div id="navbar"><span class="text">Some navbar</span></div> <div id="print__section"> test </div>
<button id="print__button" class="no-print" onclick="window.print()">Print now</button> </div></div>
Related Topics
Make Bootstrap Carousel Responsive on Height
Pace.Js "Hide Everything But Pace Until The Page Has Fully Loaded" Local Copy
CSS3 Transitions Want to Add a Colour and Fade It Away
How to Center The Zurb Foundation Top Bar Nav
Checkboxes Not Displaying Chrome - Work in Other Browsers
Using CSS Modules in React How to Pass a Classname as a Prop to a Component
Font Awesome Icons Are Not Working in Some Browsers
Does The Shadow Dom Replace: :Before and: :After
In Sass, What's The Difference Between The @Mixin and @Extend Directives
How to Add Image Background to Btn-Default Twitter-Bootstrap Button
Bootstrap: Multiple Nested Rows Within Row
Webpack 4: Mini-CSS-Extract-Plugin + Sass-Loader + Splitchunks
Way to Add Custom Class When Using Ngx-Bootstrap Modalservice
How to Add Vertical Spacing Between Block Elements, But Not Top and Bottom