Margen al imprimir la página html

Question

Estoy usando una hoja de estilo separada para imprimir. ¿Es posible establecer el margen derecho e izquierdo en la hoja de estilo que establece el margen de impresión (es decir, margen en el papel).

Gracias.

Answer 1

Debe usar cm o mm como unidad cuando especifique para la impresión. El uso de píxeles hará que el navegador lo traduzca a algo similar a lo que parece en la pantalla. El uso de cm o mm garantizará un tamaño constante en el papel.

body 
{ 
    margin: 25mm 25mm 25mm 25mm; 
} 

Para los tamaños de fuente, utilice pt para los medios impresos.

Tenga en cuenta que la configuración del margen en el cuerpo de estilo CSS no ajustar el margen en el controlador de impresora que define el área de impresión de la impresora, o el margen controlado por el navegador (puede ser ajustable en la vista preliminar en algunas navegadores) ... Simplemente establecerá un 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 sea incorrecto 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 la directiva @page para establecer el margen del papel, lo que afectará el margen en el papel fuera del elemento del cuerpo html, que normalmente está controlado por el navegador. Ver http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
Actualmente funciona en todos los navegadores más importantes, excepto en Safari.
En Internet Explorer, el margen es realmente ajustado a este valor en la configuración de esta impresión, y si lo hace de vista previa verá esta por defecto, 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: Disabling browser print options (headers, footers, margins) from page?

Answer 2

Si conoce el tamaño de papel de destino, puede colocar su contenido en un DIV con ese tamaño específico y agregar un margen a ese DIV para simular el margen de impresión. Desafortunadamente, no creo que tenga un control adicional sobre la funcionalidad de impresión, aparte de solo mostrar el cuadro de diálogo de impresión.

Answer 3

Personalmente, sugiero utilizar una unidad de medida diferente de px. No creo que los píxeles tengan mucha relevancia en términos de impresión; Lo ideal sería que tendría que utilizar:

• punto (pt)
• centímetro (cm)

Estoy seguro que hay otros, y una excelente artículo acerca de impresión CSS se puede encontrar aquí: Going to Print, por Eric Meyer.

Answer 4

Actualizado, solución simple

@media print { 
    body { 
     display: table; 
     table-layout: fixed; 
     padding-top: 2.5cm; 
     padding-bottom: 2.5cm; 
     height: auto; 
    } 
} 

antigua solución

Crear sección con cada página, y utilizar el código de abajo para ajustar los márgenes, la altura y anchura.

Si está imprimiendo en tamaño A4.

A continuación, el usuario

Tamaño: 8.27in 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; 
} 

continuación, crear un div con todo su contenido en el mismo.

<div class="Section1"> 
    type your content here... 
</div> 

Answer 5

También recomiendo pt versus cm o mm porque es más preciso. Además, no puedo hacer que @page funcione en Chrome (versión 30.0.1599.69 m) Ignora todo lo que pongo para los márgenes, grandes o pequeños. Pero, puedes hacer que funcione con los márgenes corporales en el documento, raro.

Answer 6

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 this question 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 todos mis páginas a imprimir:

@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; 
    } 
} 

---

Especial caso: Long Tables

Cuando necesitaba para imprimir una tabla en varias páginas, la margin:0 con el @page estaba dando lugar a bordes sangrantes:

que podía resolver esto gracias a this answer 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:

yo preferiría prefieren una solución que sea concisa y funciona con todos los navegadores. Por ahora, espero que la información anterior pueda ayudar a algunos desarrolladores con problemas similares.