ホームページ > ウェブフロントエンド > CSSチュートリアル > 別のスタイルシートを使用して HTML 印刷のマージンを制御する方法

別のスタイルシートを使用して HTML 印刷のマージンを制御する方法

Mary-Kate Olsen
リリース: 2024-11-05 00:42:02
オリジナル
167 人が閲覧しました

How to Control Margins in HTML Printing Using a Separate Stylesheet?

HTML 印刷における余白の制御

HTML ページの印刷レイアウトをカスタマイズする場合、適切な書式設定を確保するために余白を制御することが重要です。紙の上で。この質問では、印刷用に指定された別個のスタイル シートを使用して右マージンと左マージンを設定する方法について説明します。

印刷中に正確なマージン制御を実現するには、センチメートル (cm) やミリメートル (mm) などの絶対単位を使用することが重要です。一方、ピクセルの場合、ブラウザの解釈によりマージンが不一致になる可能性があります。したがって、次のようにマージンを指定すると一貫性が確保されます:

<code class="css">body {
  margin: 25mm 25mm 25mm 25mm;
}</code>
ログイン後にコピー

同様に、フォント サイズについては、印刷媒体のポイント (pt) を使用することをお勧めします。

その設定に注意することが重要です。 CSS を使用したマージンは、プリンタ ドライバのマージン設定やブラウザの制御されたマージンを変更しません。代わりに、ドキュメントの印刷可能領域内の余白を調整します。

用紙の余白をより柔軟に定義するには、@page ディレクティブの使用を検討してください。このアプローチは、HTML 本体要素の外側のマージンに影響を与え、印刷出力を正確に制御できるようになります。以下に例を示します。

<code class="css">@page {
  size: auto;
  margin: 25mm 25mm 25mm 25mm;
}

body {
  margin: 0px;
}</code>
ログイン後にコピー

ただし、古いバージョンの Internet Explorer では印刷サイズが自動的に調整され、マージン設定が中断される可能性があることに注意してください。これを防ぐには、印刷プレビューで印刷サイズを 100% に指定する必要があります。

以上が別のスタイルシートを使用して HTML 印刷のマージンを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート