Margen al imprimir la página html

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 papel).

Gracias.

Debe usar cmo mmcomo unidad cuando especifique para imprimir. El uso de píxeles hará que el navegador lo traduzca a algo similar a lo que se ve en la pantalla. Usar cmo mmgarantizará un tamaño uniforme en el papel.

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

Para tamaños de fuente, use ptpara los medios impresos.

Tenga en cuenta que establecer el margen en el cuerpo en estilo CSS no ajustará 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) ... solo 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 cmo 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 un control total sobre los márgenes impresos es usar la @pagedirectiva para establecer el margen del papel, lo que afectará el margen en el papel fuera del elemento del cuerpo html, que normalmente es controlado por el navegador. Ver http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Esto funciona actualmente en todos los principales navegadores, excepto Safari.
En Internet Explorer, el margen se establece realmente en este valor en la configuración de esta impresión, y si realiza la 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) desde la página?

En primer lugar, trato de obligar a todos mis usuarios a usar Chrome cuando imprimen 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, margin:0el resultado @pageera un borde sangrante:

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 configurar los márgenes superior-inferior para @page:

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

Resultado:

Prefiero una solución concisa y que 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;
   }
}

Antigua solución

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

luego crea un div con todo tu contenido.

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

Yo personalmente sugeriría usar una unidad de medida diferente a 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 , de Eric Meyer .

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 puse para los márgenes, grandes o pequeños. Pero, puede hacer que funcione con márgenes corporales en el documento, extraño.

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 mostrar el cuadro de diálogo de impresión.