html - preparar - margenes impresion css

Margen al imprimir 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

En primer lugar, intenté forzar a todos mis usuarios a usar Chrome cuando imprimí porque otros navegadores crean diferentes diseños.

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 que se impriman 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: Long Tables

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

Pude 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 superiores-inferiores para @page :

@page {
size: auto;
margin: 20mm 0 10mm 0;
}
body {
margin:0;
padding:0;
}

Resultado:

Prefiero una solución que sea concisa y que funcione con todos los navegadores. Por ahora, espero que la información anterior pueda ayudar a algunos desarrolladores con problemas similares.

Answer 2

Personalmente, sugiero usar una unidad de medida diferente que px . No creo que los píxeles tengan mucha relevancia en términos de impresión; idealmente usarías:

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

Estoy seguro de que hay otros, y un excelente artículo sobre print-css se puede encontrar aquí: Going to Print , por Eric Meyer .

Answer 3

Si conoce el tamaño de papel objetivo, 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. Lamentablemente, 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 4

Solución actualizada y simple

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

Vieja solución

Cree una sección con cada página, y use el código a continuación para ajustar los márgenes, alto y 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 en él.

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

Answer 5

También recomiendo pt versus cm o mm ya que 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

Debe usar cm o mm como unidad cuando especifique para imprimir. 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 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 ajustará el margen en el controlador de 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á 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 ''Imprimir vista previa'' 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 usar 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 se establece en realidad en este valor en la configuración para esta impresión, y si lo hace, 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?