ページ設定したい（`@page`）

@page {
    size: A4 portrait;
    margin: 20mm;
}

@pageルールで、印刷やPDF保存のときの「用紙のサイズ」と「余白」を指定できます。

@pageが効くのは印刷時だけなので、画面表示には影響しません。 @media printの中にも外にも書けます。

注釈

印刷用CSSは、そもそも印刷されることが少ないため、あまり普及していません。利用者はブラウザの見た目どおりに印刷されることを想定しているかもしれないので、導入するかは検討してください。

用紙サイズを指定したい（`size`）

@page {
    size: A4 portrait;
}

sizeディスクリプタで、用紙のサイズと向きを変更できます。 A4、A5、Letterなどの用紙名と、 portrait（縦）、landscape（横）の向きの組み合わせで指定します。省略すると、ブラウザの印刷設定で選ばれた用紙が使われます。

@page {
    size: 297mm 167mm;  /* 16:9 */
}

@page {
    size: 280mm 210mm;  /* 4:3 */
}

size: 幅高さのように、サイズを直接指定することもできます。スライドのサイズを指定するときに便利です。

注意

@pageの設定は、印刷・PDF保存時に適用され、画面表示には反映されません。画面上でスライドの比率を保ちたい場合は、aspect-ratioプロパティを使ってください。

@page {
    margin: 20mm;
}

marginディスクリプタで、用紙の端からの余白を指定します。

通常のCSSのmarginと同じく、値の数で指定範囲が変わります。

@page {
    margin: 20mm 15mm;        /* 上下 左右 */
    margin: 25mm 15mm 20mm;   /* 上 左右 下 */
}

単位はmmやcmがよく使われます。プリンタには印刷できない外周部分があるため、0にしても端まで印刷されるとは限りません。

@page {
    margin: 20mm;
}

@page :first {
    margin-top: 60mm;   /* 表紙のように上を大きくあける */
}

@page :firstで、1ページ目だけに別の設定を当てられます。

表紙のタイトルを中央寄りに見せたいときなどに使います。

@page :left {
    margin-left: 25mm;
    margin-right: 15mm;
}

@page :right {
    margin-left: 15mm;
    margin-right: 25mm;
}

@page :left / @page :rightで、綴じる側の余白を広くとった、冊子向けの設定ができます。

:leftは偶数ページ、:rightは奇数ページに対応します。

@page landscape-page {
    size: A4 landscape;
}

.wide-table {
    page: landscape-page;
    break-before: page;
}

@page 名前 { ... }で名前付きのページ設定を作り、要素側のpageプロパティでその名前を指定すると、その要素のあるページだけ設定を切り替えられます。

横長の表やグラフだけ横向きで印刷したい、といったときに使います。

@pageのsizeとmargin、:first / :left / :rightは主要ブラウザで使えます。

一方、@pageの中でヘッダーやフッターを組む@top-centerなどのマージンボックスは、ほとんどのブラウザが未対応です。ページ番号や柱を入れたい場合は、印刷用のCSS組版ツール（Paged.jsなど）を使います。