The CSS @page Rule & Margins

Technical Deep Dive & Specifications

1. The @page Rule Syntax & Dimensions

The @page at-rule establishes properties for the page box. It accepts dimensions, orientation keywords, and margin values:

@page {
  /* Standard paper size keyword + optional orientation */
  size: A4 portrait; /* or 'letter landscape', 'legal', etc. */
  
  /* Exact physical dimensions */
  /* size: 210mm 297mm; */
  /* size: 8.5in 11in; */

  /* Page margins */
  margin-top: 20mm;
  margin-right: 15mm;
  margin-bottom: 20mm;
  margin-left: 15mm;
}

Standard Paper Size Reference Table

2. Page Pseudo-Classes (:first, :left, :right, :blank)

The CSS Paged Media specification provides pseudo-classes to customize specific sheets in a multi-page document:

/* Universal defaults */
@page {
  size: A4;
  margin: 20mm;
}

/* 1. Cover Page (Sheet 1) */
@page :first {
  margin-top: 0;
  margin-bottom: 0;
  /* Often zero margin for full-bleed cover background */
}

/* 2. Left-hand / Even pages (Verso) in a bound book */
@page :left {
  margin-left: 15mm;  /* Outer edge */
  margin-right: 25mm; /* Inner gutter for bookbinding spine */
}

/* 3. Right-hand / Odd pages (Recto) in a bound book */
@page :right {
  margin-left: 25mm;  /* Inner gutter for bookbinding spine */
  margin-right: 15mm; /* Outer edge */
}

/* 4. Blank pages generated by page break padding */
@page :blank {
  @top-center { content: none; }
  @bottom-center { content: none; }
}

       LEFT-HAND PAGE (:left)                    RIGHT-HAND PAGE (:right)
+-------------------+-------------------+   +-------------------+-------------------+
|  Margin: 15mm     |  Gutter: 25mm     |   |  Gutter: 25mm     |  Margin: 15mm     |
|  (Outer)          |  (Spine)          |   |  (Spine)          |  (Outer)          |
|                   |                   | S |                   |                   |
|   Text Body       |                   | P |                   |   Text Body       |
|   Even Page       |                   | I |                   |   Odd Page        |
|                   |                   | N |                   |                   |
|                   |                   | E |                   |                   |
+-------------------+-------------------+   +-------------------+-------------------+

3. Named Pages (Switching Orientations Mid-Document)

You can assign named @page contexts to specific HTML elements to dynamically switch paper size or orientation within the same document:

/* Default page is Portrait */
@page {
  size: A4 portrait;
  margin: 20mm;
}

/* Define a specialized landscape named page */
@page landscape-sheet {
  size: A4 landscape;
  margin: 15mm;
}

/* Attach the named page to an element */
.financial-ledger-table {
  page: landscape-sheet;
  break-before: page;
  break-after: page;
}

💻 Interactive Code Playground

Below is a complete, runnable HTML document demonstrating named pages, cover page margin resets, and portrait-to-landscape transitions.

Starter Code

Line-by-Line Code Breakdown

• Lines 50–53 (@page): Establishes standard A4 portrait ($210\text{mm} \times 297\text{mm}$) with a standard $20\text{mm}$ border margin.
• Lines 56–58 (@page :first): Targets the very first sheet in the document stack and sets margin to 0, allowing cover graphics to bleed directly to the sheet boundary.
• Lines 61–64 (@page wide-table-page): Defines a custom named page with size: A4 landscape and reduced $15\text{mm}$ margins.
• Lines 79–81 (.landscape-section): Assigns the page: wide-table-page; property to the container, instructing the print layout engine to trigger a page break and rotate the virtual paper by 90 degrees.
• Lines 72–77 (.page-sheet): Enforces break-after: page; (with legacy fallback page-break-after: always;) so every visual sheet starts on a fresh physical page.

Expected Browser Render Output

• Screen View: Displays three neat, centered paper sheets with drop shadows over a slate-gray background. Sheet 1 is dark, Sheet 2 is portrait white, and Sheet 3 is a wide landscape sheet.
• Print Preview (Cmd/Ctrl + P):
  • Page 1 prints in portrait with edge-to-edge dark theme.
  • Page 2 prints in portrait with $20\text{mm}$ margins.
  • Page 3 automatically rotates into landscape format, cleanly displaying all 8 columns without horizontal clipping or font shrinking.