Réponses:
Vous devez utiliser cm
ou mm
comme unité lorsque vous spécifiez pour l'impression. L'utilisation de pixels amènera le navigateur à le traduire en quelque chose de similaire à ce à quoi il ressemble à l'écran. L'utilisation de cm
ou mm
garantira une taille uniforme sur le papier.
body
{
margin: 25mm 25mm 25mm 25mm;
}
Pour les tailles de police, utilisez pt
pour le support d'impression.
Notez que définir la marge sur le corps en style css n'ajustera pas la marge dans le pilote d'imprimante qui définit la zone imprimable de l'imprimante, ou la marge contrôlée par le navigateur (peut être ajustable en aperçu avant impression sur certains navigateurs) ... définira simplement la marge sur le document à l'intérieur de la zone imprimable.
Vous devez également savoir que IE7 ++ ajuste automatiquement la taille pour qu'elle corresponde au mieux et que tout soit faux, même si vous utilisez cm
ou mm
. Pour remplacer ce comportement, l'utilisateur doit sélectionner «Aperçu avant impression», puis définir la taille d'impression sur 100%
(la valeur par défaut est Shrink To Fit
).
Une meilleure option pour un contrôle total des marges imprimées consiste à utiliser la @page
directive pour définir la marge du papier, ce qui affectera la marge du papier en dehors de l'élément de corps html, qui est normalement contrôlé par le navigateur. Voir http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Cela fonctionne actuellement dans tous les principaux navigateurs, à l'exception de Safari.
Dans Internet Explorer, la marge est en fait définie sur cette valeur dans les paramètres de cette impression, et si vous faites Aperçu, vous l'obtiendrez par défaut, mais l'utilisateur peut la modifier dans l'aperçu.
@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;
}
Réponse associée: Désactiver les options d'impression du navigateur (en-têtes, pieds de page, marges) à partir de la page?
Tout d'abord, j'essaie de forcer tous mes utilisateurs à utiliser Chrome lors de l'impression car d'autres navigateurs créent des mises en page différentes.
Une réponse à cette question recommande:
@page {
size: 210mm 297mm;
/* Chrome sets own margins, we change these printer settings */
margin: 27mm 16mm 27mm 16mm;
}
Cependant, j'ai fini par utiliser ce CSS pour toutes mes pages à imprimer:
@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;
}
}
Cas particulier: Tables longues
Lorsque j'avais besoin d'imprimer un tableau sur plusieurs pages, le margin:0
avec le @page
menait à des saignements:
Je pourrais résoudre cela grâce à cette réponse avec:
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }
De plus, définir les marges haut-bas pour @page
:
@page {
size: auto;
margin: 20mm 0 10mm 0;
}
body {
margin:0;
padding:0;
}
Résultat:
Je préférerais une solution concise et compatible avec tous les navigateurs. Pour l'instant, j'espère que les informations ci-dessus pourront aider certains développeurs à résoudre des problèmes similaires.
Solution simple et mise à jour
@media print {
body {
display: table;
table-layout: fixed;
padding-top: 2.5cm;
padding-bottom: 2.5cm;
height: auto;
}
}
Ancienne solution
Créez une section avec chaque page et utilisez le code ci-dessous pour ajuster les marges, la hauteur et la largeur.
Si vous imprimez au format A4.
Puis utilisateur
Taille: 8,27 pouces et 11,69 pouces
@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;
}
puis créez un div avec tout votre contenu.
<div class="Section1">
type your content here...
</div>
class=Section1
devrait être class="Section1"
.
Je suggérerais personnellement d'utiliser une unité de mesure différente de celle px
. Je ne pense pas que les pixels aient beaucoup d'importance en termes d'impression; idéalement, vous utiliseriez:
Je suis sûr qu'il y en a d'autres, et un excellent article sur le print-css peut être trouvé ici: Going to Print , par Eric Meyer .
px
n'a pas beaucoup d'importance à imprimer. Mais les navigateurs "traduisent" les unités de pixels de sorte que cela ressemble à ce à quoi il ressemble à l'écran. Il n'utilise pas les "points de résolution d'imprimante" comme pixels (Dieu merci ...).
Je recommande également pt par rapport au cm ou au mm car c'est plus précis. De plus, je ne peux pas faire fonctionner @page dans Chrome (version 30.0.1599.69 m). Il ignore tout ce que je mets pour les marges, grandes ou petites. Mais, vous pouvez le faire fonctionner avec les marges du corps sur le document, bizarre.
Si vous connaissez le format de papier cible, vous pouvez placer votre contenu dans un DIV avec cette taille spécifique et ajouter une marge à ce DIV pour simuler la marge d'impression. Malheureusement, je ne pense pas que vous ayez un contrôle supplémentaire sur la fonctionnalité d'impression à part simplement afficher la boîte de dialogue d'impression.
<body class="firefox">
donc dans votre css, vous pouvez le fairebody.firefox {margin: 0mm; padding: 0.25in;}
, c'est en fait une marge de 0,75 pouce car Firefox ajoute déjà 0,5 pouce. Cela devrait fonctionner tant que vous avez besoin de marges> = 0,5 pouce.