htmlページを印刷中のマージン

Question

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

ありがとうございました。

Answer 1

印刷用に指定するときは、cmまたはmmを単位として使用する必要があります。ピクセルを使用すると、ブラウザはそれを画面上に似たようなものに変換します。 cmまたはmmを使用すると、用紙に一貫したサイズが確保されます。

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

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

本文にCSSスタイルで余白を設定すると、ではなく、は、プリンタの印刷可能領域を定義するプリンタドライバ、またはブラウザによって制御される余白に調整されます（印刷プレビューブラウザ）...印刷可能領域内の文書に余白を設定するだけです。

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

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

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

関連の答え： Disabling browser print options (headers, footers, margins) from page?

Answer 2

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

Answer 3

pxとは別の測定単位を使用することをおすすめします。私は画素が印刷物の関連性が高いとは思わない。理想的にあなたが使用したい：

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

私は他の人があると確信している、と印刷-CSS約優れた記事をここに見つけることができます： Going to Print、Eric Meyer。

Answer 4

更新、簡単な解決策

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

旧ソリューション

は、各ページのセクションを作成し、余白を調整するには、以下のコードを使用し、高さと幅。

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

は、ユーザー

サイズ：8.27inと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> 

Answer 5

さらに正確なptとcmまたはmmをお勧めします。 また、Chromeで動作する@pageを取得できません（バージョン30.0.1599.69 m）大小のマージンを無視します。しかし、あなたはドキュメント上のボディマージン、奇妙なものを扱うことができます。

Answer 6

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

this questionからの回答はお勧めします。

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

---

特別ケース：ロングテーブル

私は@pageとmargin:0が出血エッジにリードしていた、複数のページに表を印刷するために必要なとき：

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

：私は this answerに、このおかげで解決することができ

さらにプラスボトムマージンを@pageに設定します。

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

結果：

私はむしろ簡潔であり、すべてのブラウザで動作するソリューションを好むだろう。今のところ、上記の情報が同様の問題を抱えている開発者に役立つことを願っています。