HTMLページの印刷中のマージン

印刷用に別のスタイルシートを使用しています。印刷マージンを設定するスタイルシートで左右のマージンを設定することは可能ですか（つまり、用紙のマージン）。

ありがとう。

印刷を指定する場合は、cmまたはmmを使用する必要があります。ピクセルを使用すると、ブラウザはそれを画面上と同じように変換します。cmまたはmmを使用すると、用紙のサイズが一定になります。

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

フォントサイズについてptは、印刷メディアに使用します。

cssスタイルで本文のマージンを設定しても、プリンターの印刷可能領域を定義するプリンタードライバーのマージン、またはブラウザーによって制御されるマージンは調整されないことに注意してください（一部のブラウザーの印刷プレビューで調整可能）...印刷可能領域内のドキュメントにマージンを設定します。

また、IE7 ++は自動的にサイズを最適に調整し、cmまたはを使用した場合でもすべてが正しくないことに注意してくださいmm。この動作を無効にするには、ユーザーは[印刷プレビュー]を選択して、印刷サイズを100%（デフォルトはShrink To Fit）に設定する必要があります。

印刷されたマージンを完全に制御するためのより良いオプションは、@pageディレクティブを使用して紙のマージンを設定することです。これは、通常ブラウザによって制御されるhtml body要素の外側の紙のマージンに影響します。http://www.w3.org/TR/1998/REC-CSS2-19980512/page.htmlを参照してください。
これは現在、Safariを除くすべての主要ブラウザで機能します。
Internet Explorerでは、この印刷の設定でマージンが実際にこの値に設定されています。プレビューを実行すると、デフォルトでこれが取得されますが、ユーザーはプレビューで変更できます。

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

関連する回答： ページからブラウザーの印刷オプション（ヘッダー、フッター、マージン）を無効にしますか？

まず、他のブラウザではレイアウトが異なるため、すべてのユーザーが印刷時にChromeを使用するように強制しようとしています。

以下からの回答この質問は、お勧めします。

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

しかし、私は印刷するすべてのページにこのCSSを使用することになりました。

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

特殊なケース：長いテーブル

テーブルを複数のページに分けて印刷する必要がある場合、margin:0with @pageを使用すると端がにじむことがありました。

私はこの答えのおかげでこれを解決することができました：

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

さらに、上下のマージンを設定します@page。

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

結果：

私はむしろ、簡潔ですべてのブラウザで機能するソリューションを好みます。今のところ、上記の情報が同様の問題を持つ一部の開発者に役立つことを願っています。

更新されたシンプルなソリューション

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

古いソリューション

各ページでセクションを作成し、以下のコードを使用してマージン、高さ、幅を調整します。

A4サイズで印刷する場合。

次にユーザー

サイズ：8.27インチおよび11.69インチ

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

次に、すべてのコンテンツを含むdivを作成します。

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

個人的には、とは異なる測定単位を使用することをお勧めしpxます。ピクセルは印刷に関してはあまり関係がないと思います。理想的にはあなたが使うでしょう：

• ポイント（pt）
• センチメートル（cm）

他にもあると思います。print-cssに関する優れた記事は、Eric MeyerのGoing to Printにあります。

また、cmやmmよりも正確なptをお勧めします。また、@ pageをChromeで機能させることはできません（バージョン30.0.1599.69 m）マージンの大小を問わず、無視したものはすべて無視されます。しかし、奇妙なことに、ドキュメントの本文の余白で機能させることができます。

ターゲットの用紙サイズがわかっている場合は、コンテンツをその特定のサイズのDIVに配置し、そのDIVにマージンを追加して、印刷マージンをシミュレートできます。残念ながら、印刷ダイアログボックスを表示するだけで、印刷機能を細かく制御できるとは思いません。