Margem ao imprimir a página html

Estou usando uma folha de estilo separada para impressão. É possível definir as margens direita e esquerda na folha de estilo que define a margem de impressão (ou seja, margem no papel).

Obrigado.

Você deve usar cmou mmcomo unidade quando especificar para impressão. O uso de pixels fará com que o navegador o traduza para algo semelhante ao que parece na tela. Usar cmou mmgarantirá um tamanho consistente no papel.

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

Para tamanhos de fonte, use ptpara a mídia de impressão.

Observe que definir a margem no corpo no estilo css não ajustará a margem no driver da impressora que define a área imprimível da impressora ou a margem controlada pelo navegador (pode ser ajustável na visualização de impressão em alguns navegadores) ... apenas definirá margem no documento dentro da área imprimível.

Você também deve estar ciente de que o IE7 ++ ajusta automaticamente o tamanho para melhor se ajustar e faz com que tudo fique errado, mesmo se você usar cmou mm. Para substituir esse comportamento, o usuário deve selecionar 'Visualizar impressão' e definir o tamanho da impressão como 100%(o padrão é Shrink To Fit).

Uma opção melhor para o controle total das margens impressas é usar a @pagediretiva para definir a margem do papel, o que afetará a margem do papel fora do elemento do corpo html, que normalmente é controlado pelo navegador. Consulte http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Atualmente, ele funciona em todos os principais navegadores, exceto o Safari.
No Internet Explorer, a margem é realmente definida para esse valor nas configurações para esta impressão e, se você fizer a Visualização, obterá isso como padrão, mas o usuário poderá alterá-lo na visualização.

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

Resposta relacionada: Desativando as opções de impressão do navegador (cabeçalhos, rodapés, margens) da página?

Em primeiro lugar, tento forçar todos os meus usuários a usar o Chrome ao imprimir, porque outros navegadores criam layouts diferentes.

Uma resposta desta pergunta recomenda:

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

No entanto, acabei usando este CSS para todas as minhas páginas serem impressas:

@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 Longas

Quando precisei imprimir uma tabela em várias páginas, o margin:0com @pageestava levando a bordas sangrentas:

Eu poderia resolver isso graças a esta resposta com:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Além disso, defina as margens superior-inferior para @page:

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

Resultado:

Prefiro uma solução concisa e que funcione com todos os navegadores. Por enquanto, espero que as informações acima possam ajudar alguns desenvolvedores com problemas semelhantes.

Solução simples e atualizada

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

Solução antiga

Crie uma seção com cada página e use o código abaixo para ajustar margens, altura e largura.

Se você estiver imprimindo no tamanho A4.

Então usuário

Tamanho: 8.27in e 11.69 polegadas

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

em seguida, crie uma div com todo o seu conteúdo.

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

Eu pessoalmente sugeriria usar uma unidade de medida diferente daquela px. Não acho que os pixels tenham muita relevância em termos de impressão; idealmente você usaria:

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

Tenho certeza que existem outros, e um excelente artigo sobre print-css pode ser encontrado aqui: Going to Print , de Eric Meyer .

Também recomendo pt versus cm ou mm, pois é mais preciso. Além disso, não consigo que o @page funcione no Chrome (versão 30.0.1599.69 m). Ele ignora qualquer coisa que eu coloquei nas margens, grandes ou pequenas. Mas você pode fazê-lo funcionar com as margens do corpo no documento, estranho.

Se você souber o tamanho do papel de destino, poderá colocar seu conteúdo em um DIV com esse tamanho específico e adicionar uma margem a esse DIV para simular a margem de impressão. Infelizmente, não acredito que você tenha controle extra sobre a funcionalidade de impressão, apenas mostre a caixa de diálogo de impressão.