ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用して HTML ページの印刷マージンを設定できますか?

CSS を使用して HTML ページの印刷マージンを設定できますか?

DDD
リリース: 2024-11-09 01:24:02
オリジナル
693 人が閲覧しました

Can I Set Print Margins for HTML Pages Using CSS?

HTML ページを印刷するときの余白の設定

HTML ページを印刷するときは、印刷結果が適合するように左右の余白を調整する必要がある場合があります。プリンターで定義された余白に合わせて印刷します。

印刷を設定することはできますか? CSS スタイル シートで余白を設定しますか?

はい、CSS スタイル シートで cm または mm 単位を使用してページ余白を設定できます。例:

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

cm または mm を使用すると、画面解像度に関係なく、用紙上のマージン サイズが一貫したものになります。

追加の考慮事項:

  • フォント サイズ: 印刷時のフォント サイズには「pt」単位を使用しますmedia.
  • ブラウザのマージン調整: ブラウザのマージン設定 (ブラウザまたはプリンタ ドライバによって制御される) は、CSS マージンをオーバーライドする場合があります。 @page ディレクティブを使用して、ヘッダー、フッター、マージンなどのブラウザーの印刷オプションを無効にできます。
  • Internet Explorer の調整: IE7 以降では、コンテンツに合わせてマージンが自動的に調整されます。これをオーバーライドするには、印刷プレビューで印刷サイズを 100% に設定します。
  • @page ディレクティブ: @page ディレクティブを使用して、HTML 本体要素の外側にマージンを設定し、用紙マージン自体に影響を与えます。 。ただし、このディレクティブは Safari では機能しない可能性があります。

body ディレクティブと @page ディレクティブを使用した例:

<code class="css">body {
  margin: 0px;  /* Margin for content within the HTML body */
}

@page {
  size: auto;
  margin: 25mm 25mm 25mm 25mm;  /* Margin for paper outside the body */
}</code>
ログイン後にコピー

以上がCSS を使用して HTML ページの印刷マージンを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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