Marge lors de l'impression de la page HTML

J'utilise une feuille de style distincte pour l'impression. Est-il possible de définir la marge droite et gauche dans la feuille de style qui définit la marge d'impression (c'est-à-dire la marge sur papier).

Merci.

Vous devez utiliser cmou mmcomme 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 cmou mmgarantira une taille uniforme sur le papier.

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

Pour les tailles de police, utilisez ptpour 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 cmou 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 @pagedirective 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:0avec le @pagemenait à 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>

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:

• point (pt)
• centimètre (cm)

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 .

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.