Margine durante la stampa della pagina html

Sto usando un foglio di stile separato per la stampa. È possibile impostare il margine destro e sinistro nel foglio di stile che imposta il margine di stampa (cioè il margine sulla carta).

Grazie.

È necessario utilizzare cmo mmcome unità quando si specifica per la stampa. L'uso dei pixel indurrà il browser a tradurlo in qualcosa di simile a come appare sullo schermo. L'uso cmo mmgarantirà un formato coerente sulla carta.

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

Per le dimensioni dei caratteri, utilizzare ptper i supporti di stampa.

Si noti che l'impostazione del margine sul corpo in stile CSS non regolerà il margine nel driver della stampante che definisce l'area stampabile della stampante o il margine controllato dal browser (potrebbe essere regolabile nell'anteprima di stampa su alcuni browser) ... imposterà semplicemente il margine sul documento all'interno dell'area stampabile.

Dovresti anche essere consapevole che IE7 ++ regola automaticamente le dimensioni per adattarle al meglio e fa sì che tutto sia sbagliato anche se usi cmo mm. Per ignorare questo comportamento, l'utente deve selezionare "Anteprima di stampa" e quindi impostare la dimensione di stampa su 100%(impostazione predefinita Shrink To Fit).

Un'opzione migliore per il pieno controllo sui margini stampati è quella di utilizzare la @pagedirettiva per impostare il margine della carta, che influenzerà il margine sulla carta al di fuori dell'elemento del corpo html, che è normalmente controllato dal browser. Vedi http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Questo attualmente funziona in tutti i principali browser tranne Safari.
In Internet Explorer, il margine è effettivamente impostato su questo valore nelle impostazioni per questa stampa e, se si esegue l'anteprima, questo verrà visualizzato come predefinito, ma l'utente può modificarlo nell'anteprima.

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

Risposta correlata: disabilitare le opzioni di stampa del browser (intestazioni, piè di pagina, margini) dalla pagina?

Innanzitutto, provo a forzare tutti i miei utenti a utilizzare Chrome durante la stampa perché altri browser creano layout diversi.

Una risposta a questa domanda raccomanda:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Tuttavia, ho finito per usare questo CSS per tutte le mie pagine da stampare:

@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 speciale: tavoli lunghi

Quando avevo bisogno di stampare un tavolo su più pagine, il margin:0con il @pagestava portando a bordi sanguinanti:

Ho potuto risolvere questo grazie a questa risposta 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; }

Inoltre, impostando i margini superiore-inferiore per @page:

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

Risultato:

Preferirei una soluzione concisa e che funzioni con tutti i browser. Per ora, spero che le informazioni di cui sopra possano aiutare alcuni sviluppatori con problemi simili.

Soluzione semplice e aggiornata

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

Vecchia soluzione

Crea sezione con ogni pagina e usa il codice qui sotto per regolare margini, altezza e larghezza.

Se si sta stampando in formato A4.

Quindi utente

Dimensioni: 8,27 pollici e 11,69 pollici

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

quindi crea un div con tutti i tuoi contenuti.

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

Personalmente suggerirei di utilizzare un'unità di misura diversa rispetto a px. Non credo che i pixel abbiano molta rilevanza in termini di stampa; idealmente dovresti usare:

• punto (pt)
• centimetro (cm)

Sono sicuro che ce ne sono altri e un eccellente articolo su print-css può essere trovato qui: Going to Print , di Eric Meyer .

Consiglio anche pt contro cm o mm in quanto è più preciso. Inoltre, non riesco a far funzionare @page in Chrome (versione 30.0.1599.69 m) Ignora tutto ciò che ho messo per i margini, grandi o piccoli. Ma puoi farlo funzionare con i margini del corpo sul documento, strano.

Se si conosce il formato carta di destinazione, è possibile posizionare il contenuto in un DIV con quel formato specifico e aggiungere un margine a quel DIV per simulare il margine di stampa. Sfortunatamente, non credo che tu abbia un controllo extra sulla funzionalità di stampa oltre a mostrare la finestra di dialogo di stampa.