Recuerda que en la informática un error casi siempere puede tener diferentes soluciones, por lo tanto aquí te mostraremos lo más óptimo y mejor.
Solución:
Deberías usar cm o mm como unidad cuando especifica la impresión. El uso de píxeles hará que el navegador lo traduzca a algo similar a lo que parece en la pantalla. Utilizando cm o mm asegurará un tamaño consistente en el papel.
body
margin: 25mm 25mm 25mm 25mm;
Para tamaños de fuente, use pt para los medios impresos.
Tenga en cuenta que establecer el margen en el cuerpo en estilo css no ajuste el margen en el controlador de la impresora que define el área imprimible de la impresora, o el margen controlado por el navegador (puede ser ajustable en la vista previa de impresión en algunos navegadores)… Simplemente establecerá el margen en el documento dentro del área imprimible.
También debe tener en cuenta que IE7 ++ ajusta automáticamente el tamaño para que se ajuste mejor y hace que todo esté mal incluso si usa cm o mm. Para anular este comportamiento, el usuario debe seleccionar ‘Vista previa de impresión’ y luego establecer el tamaño de impresión en 100% (el valor predeterminado es Shrink To Fit).
Una mejor opción para el control total de los márgenes impresos es utilizar el @page directiva para establecer el margen del papel, lo que afectará el margen del papel fuera del elemento del cuerpo html, que normalmente es controlado por el navegador. Consulte http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
Actualmente, esto funciona en todos los principales navegadores excepto Safari.
En Internet Explorer, el margen en realidad se establece en este valor en la configuración de esta impresión, y si hace Vista previa obtendrá esto como predeterminado, pero el usuario puede cambiarlo en la vista previa.
@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;
Respuesta relacionada: ¿Deshabilitar las opciones de impresión del navegador (encabezados, pies de página, márgenes) de la página?
En primer lugar, trato de obligar a todos mis usuarios a usar Chrome al imprimir porque otros navegadores crean diseños diferentes.
Una respuesta de esta pregunta recomienda:
@page
size: 210mm 297mm;
/* Chrome sets own margins, we change these printer settings */
margin: 27mm 16mm 27mm 16mm;
Sin embargo, terminé usando este CSS para imprimir todas mis páginas:
@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;
Caso especial: Mesas Largas
Cuando necesitaba imprimir una tabla en varias páginas, el margin:0 con el @page estaba conduciendo a bordes sangrantes:
Podría resolver esto gracias a esta respuesta con:
table page-break-inside:auto
tr page-break-inside:avoid; page-break-after:auto
thead display:table-header-group;
tfoot display:table-footer-group;
Además de establecer los márgenes superior-inferior para @page:
@page
size: auto;
margin: 20mm 0 10mm 0;
body
margin:0;
padding:0;
Resultado:
Preferiría una solución que sea concisa y funcione con todos los navegadores. Por ahora, espero que la información anterior pueda ayudar a algunos desarrolladores con problemas similares.
Solución simple y actualizada
@media print
body
display: table;
table-layout: fixed;
padding-top: 2.5cm;
padding-bottom: 2.5cm;
height: auto;
Solución antigua
Cree una sección con cada página y use el siguiente código para ajustar los márgenes, la altura y el ancho.
Si está imprimiendo en tamaño A4.
Entonces usuario
Tamaño: 8,27 pulgadas y 11,69 pulgadas
@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;
luego crea un div con todo tu contenido.
type your content here...
Acuérdate de que puedes esclarecer si te fue útil.