Respostas:
Você deve usar cm
ou mm
como 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 cm
ou mm
garantirá um tamanho consistente no papel.
body
{
margin: 25mm 25mm 25mm 25mm;
}
Para tamanhos de fonte, use pt
para 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 cm
ou 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 @page
diretiva 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:0
com @page
estava 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>
class=Section1
deveria ser class="Section1"
.
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:
Tenho certeza que existem outros, e um excelente artigo sobre print-css pode ser encontrado aqui: Going to Print , de Eric Meyer .
px
não tem muita relevância para imprimir. Mas os navegadores "convertem" unidades de pixel para que pareçam com a aparência na tela. Ele não usa os "pontos de resolução da impressora" como pixels (graças a Deus ...).
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.
<body class="firefox">
para que no seu css você possa fazerbody.firefox {margin: 0mm; padding: 0.25in;}
, que é na verdade uma margem de 0,75 polegadas, porque o Firefox já adiciona 0,5in. Isso deve funcionar desde que você precise de margens de 0,5 polegada.