# Web page to PDF: paper sizes, margins, print CSS

> Paper sizes in millimetres, inches, CSS pixels and points, how margins and page breaks work in a PDF of a web page, and the print CSS that controls them.

Reference by Serghei Pogor, founder of CurlShot (https://curlshot.com/about/serghei-pogor). Published 16 October 2026. Page for people: https://curlshot.com/blog/web-page-to-pdf-paper-sizes

A PDF of a web page is laid out in CSS pixels at 96 per inch, so A4 (210 × 297 mm) is 794 × 1123 px and US Letter (8.5 × 11 in) is exactly 816 × 1056 px. The layout is as wide as the paper minus its left and right margins, which is why a page often looks narrower in a PDF than on screen. The paper and margins are set with the CSS @page rule, and page breaks with break-before, break-after and break-inside.

## Key facts

- The conversion is px = inches × 96 and px = mm × 96 / 25.4. One point is 1/72 inch, so pt = px × 0.75.
- A4 is 210 × 297 mm, 8.27 × 11.69 in, 794 × 1123 px and 595 × 842 pt. Letter is 215.9 × 279.4 mm, 816 × 1056 px and 612 × 792 pt.
- A4 is 5.9 mm narrower and 17.6 mm taller than Letter. Letter is the default in 14 territories, including the United States, Canada and Mexico. A4 is the default everywhere else.
- A4 with a 20 mm margin leaves a content area of 170 × 257 mm, which is 643 × 971 px.
- Page margin boxes (running headers and page numbers in CSS) work in Chrome 131 and later, and not in Firefox or Safari. Firefox supports neither orphans nor widows.
- CurlShot makes the PDF with format=pdf. The defaults are A4, portrait, no margin, backgrounds printed and the screen layout.

## The anatomy of a printed page

A printed page in CSS is a page box: the paper, a margin on each side, and the page area in the middle where the document flows. The example is A4 with a 20 mm margin.

| Part | What it is | On A4 with a 20 mm margin | CSS |
| --- | --- | --- | --- |
| 1. Paper edge | The sheet itself. | 210 × 297 mm, 794 × 1123 px | `@page { size: A4 }` |
| 2. Margin | The band between the paper edge and the content. | 20 mm, 75.6 px on each side | `@page { margin: 20mm }` |
| 3. Page area | Where the content is laid out. Its width is the layout width of the document. | 170 × 257 mm, 643 × 971 px | paper minus margins |
| 4. Header zone | The margin boxes along the top edge. | Inside the 20 mm top margin | `@top-left, @top-center, @top-right` |
| 5. Footer zone | The margin boxes along the bottom edge. Page numbers go here. | Inside the 20 mm bottom margin | `@bottom-left, @bottom-center, @bottom-right` |
| 6. Page break | Where one page area ends and the content carries on in the next. | Every 257 mm of content | `break-before, break-after, break-inside` |

## Paper sizes in mm, inches, pixels and points

CSS fixes the pixel at 1/96 of an inch and the point at 1/72 of an inch, so every paper size has one size in pixels and one in points.

- `px = inches × 96`
- `px = mm × 96 / 25.4` (1 mm is 3.7795 px)
- `pt = inches × 72`, which is `px × 0.75`

| Paper | Millimetres | Inches | CSS pixels (96 per inch) | Points (72 per inch) | CSS `size` keyword |
| --- | --- | --- | --- | --- | --- |
| A0 | 841 × 1189 | 33.11 × 46.81 | 3179 × 4494 | 2384 × 3370 | two lengths |
| A1 | 594 × 841 | 23.39 × 33.11 | 2245 × 3179 | 1684 × 2384 | two lengths |
| A2 | 420 × 594 | 16.54 × 23.39 | 1587 × 2245 | 1191 × 1684 | two lengths |
| A3 | 297 × 420 | 11.69 × 16.54 | 1123 × 1587 | 842 × 1191 | `A3` |
| A4 | 210 × 297 | 8.27 × 11.69 | 794 × 1123 | 595 × 842 | `A4` |
| A5 | 148 × 210 | 5.83 × 8.27 | 559 × 794 | 420 × 595 | `A5` |
| A6 | 105 × 148 | 4.13 × 5.83 | 397 × 559 | 298 × 420 | two lengths |
| Letter | 215.9 × 279.4 | 8.5 × 11 | 816 × 1056 | 612 × 792 | `letter` |
| Legal | 215.9 × 355.6 | 8.5 × 14 | 816 × 1344 | 612 × 1008 | `legal` |
| Tabloid | 279.4 × 431.8 | 11 × 17 | 1056 × 1632 | 792 × 1224 | `ledger` |

Pixels and points are rounded to the nearest whole number, inches to two decimals. ISO sizes are defined in millimetres and North American sizes in inches, so only the North American pixel figures are exact. Ledger is Tabloid turned on its side: 17 × 11 in, 1632 × 1056 px.

A4 is 5.9 mm narrower and 17.6 mm taller than Letter. Each ISO A size is the one before it cut in half across its long side, with halves rounded down to a whole millimetre, and every A sheet keeps the same shape: 1 to the square root of 2 (about 1.414). Letter is 1 to 1.294 and Legal 1 to 1.647. Tabloid is two Letter sheets side by side.

Chromium-based tools define the A sizes in inches rounded to two decimals (A4 as 8.27 × 11.7 in), so a page they report can differ from the ISO figure by one pixel.

### The content area after margins

The content area is the paper minus the margins, and its width is the width the page is laid out at.

| Paper | Margin on every side | Content area in mm | Content area in px |
| --- | --- | --- | --- |
| A4 | 0 | 210 × 297 | 794 × 1123 |
| A4 | 10mm | 190 × 277 | 718 × 1047 |
| A4 | 15mm | 180 × 267 | 680 × 1009 |
| A4 | 20mm | 170 × 257 | 643 × 971 |
| A4 | 1in | 159.2 × 246.2 | 602 × 931 |
| Letter | 0 | 215.9 × 279.4 | 816 × 1056 |
| Letter | 0.5in | 190.5 × 254 | 720 × 960 |
| Letter | 0.75in | 177.8 × 241.3 | 672 × 912 |
| Letter | 1in | 165.1 × 228.6 | 624 × 864 |

## Why a web page looks different as a PDF

1. **The print media type is active.** A browser that prints applies the rules inside @media print and skips the ones inside @media screen. Sites use that to hide menus, sidebars and cookie banners and to switch to a single column. To keep the screen look in a PDF, the tool that makes it has to emulate the screen media type.
2. **Backgrounds are left out by default.** print-color-adjust starts at economy, which lets the browser drop background colours and images and darken pale text to save ink. Print dialogs and PDF libraries usually ship with the background switch off. Turn on background graphics in the tool, and set print-color-adjust: exact on the elements whose colours carry meaning.
3. **The layout is as wide as the paper, not the window.** On paper the layout width is the page area: the paper width minus the left and right margins. A4 with no margin is 794 CSS pixels wide, about the width of a tablet in portrait, so width media queries pick the tablet or phone layout. Use landscape or a larger sheet for wide layouts, or write print rules that do not depend on the window width.

A breakpoint on paper: a rule inside `@media (min-width: 1024px)` does not apply on A4 portrait, which is 794 px wide. It does apply on A4 landscape and on A3 portrait, which are both 1123 px wide.

## Print CSS cheat sheet

### Paper size and margins

```css
/* also: letter, A3 landscape */
@page {
  size: A4;
  margin: 20mm;
}
```

Sets the sheet and the margin for every page of the document. CSS has keywords for A5, A4, A3, B5, B4, JIS-B5, JIS-B4, letter, legal and ledger. Any other sheet is written as two lengths. Safari does not support the portrait and landscape keywords.

Support: Chrome 15, Firefox 95, Safari 18.2.

### A different first page

```css
/* room for a letterhead on page one */
@page :first {
  margin-top: 40mm;
}
```

Styles only the first printed page. :left and :right style the two sides of a spread. Firefox does not support :left and :right.

Support: Chrome 18, Firefox 116, Safari 6.

### Page breaks

```css
/* start on a new page */
h2 { break-before: page; }

/* never split in two */
figure, tr { break-inside: avoid; }

/* keep a heading with what follows */
h2, h3 { break-after: avoid-page; }
```

Forces a break before an element, or keeps a block or a heading and its text together. Firefox does not support avoid-page (or plain avoid) on break-before and break-after; break-inside: avoid works in all three.

Support: Chrome 50, Firefox 65, Safari 10.

### Legacy page-break aliases

```css
/* the same as break-before: page */
h2 { page-break-before: always; }

/* the same as break-inside: avoid */
figure { page-break-inside: avoid; }
```

The older page-break-* properties still work: browsers treat them as aliases of break-*. The alias maps always to page. Write both forms only if you must support very old engines.

Support: Chrome yes, Firefox yes, Safari yes.

### Orphans and widows

```css
p {
  orphans: 3;  /* lines left at the bottom */
  widows: 3;   /* lines carried to the top */
}
```

Sets the fewest lines of a paragraph that may stand alone on either side of a break. Both start at 2. Firefox supports neither property.

Support: Chrome 25, Firefox no, Safari 1.3.

### Keep backgrounds and colours

```css
.badge, thead th {
  /* the prefixed line is for Chrome before 136 */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
```

Tells the browser not to drop or alter the backgrounds and colours of these elements in print. Chrome took the -webkit- prefix from version 17 and the plain name from 136. Chrome and Safari do not print the background of the body element itself, and a user setting can still override the property.

Support: Chrome 136, Firefox 97, Safari 15.4.

### Rules for paper only

```css
@media print {
  nav, aside, .cookie-banner {
    display: none !important;
  }
  body { font-size: 11pt; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}
```

Applies only when the page is printed or saved as a PDF: hide the navigation, set type in points, print link addresses.

Support: Chrome yes, Firefox yes, Safari yes.

### Repeat table headers

```html
<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tbody>...</tbody>
</table>
```

A real thead is a table header group, which print engines may repeat on every page the table spans. CSS says "may", so treat a repeated header as likely, not guaranteed, and test in the engine you print with. A header built from div elements never repeats.

### Running header and page numbers

```css
@page {
  @top-center {
    content: "Quarterly report";
  }
  @bottom-right {
    content: counter(page) " / " counter(pages);
  }
}
```

Puts text and page numbers in the 16 margin boxes around the page area. Chrome 131 and later only. The margin has to be wide enough to hold the text: with a zero margin there is nowhere to draw it.

Support: Chrome 131, Firefox no, Safari no.

## Which settings to choose

### One long page or real pages?

- **Real pages** when the PDF will be printed, signed, filed next to other documents, or needs page numbers.
- **One long page** when the PDF is read on a screen or kept as a record of how the page looked: no break can cut an image or a table in two.

### A4 or Letter?

- **Letter** when the reader is in one of the 14 territories where it is the default: United States, Canada, Mexico, Belize, Chile, Colombia, Costa Rica, El Salvador, Guatemala, Nicaragua, Panama, Philippines, Puerto Rico, Venezuela.
- **A4** when the reader is anywhere else, or you do not know. A4 is the default for the rest of the world.

### Portrait or landscape?

- **Portrait** when the content is text: articles, invoices, letters, contracts. Lines stay a comfortable length.
- **Landscape** when the content is wide: tables with many columns, dashboards, charts, slides. A4 landscape gives the layout 1123 pixels instead of 794.

### Print backgrounds?

- **On** when the PDF should look like the page: brand colours, table stripes, charts, code blocks, dark headers.
- **Off** when the PDF goes to a printer and ink matters, or the page has a dark theme that would print as a solid block.

## PDF options in the CurlShot API

CurlShot makes a PDF when a request carries `format=pdf`. A PDF always covers the whole page from top to bottom.

| API option | Accepted values | Default | What it does | CSS equivalent |
| --- | --- | --- | --- | --- |
| `pdf_paper_format` | a0, a1, a2, a3, a4, a5, a6, letter, legal, tabloid, ledger | a4 | The paper size of every page. | @page { size: A4 } |
| `pdf_landscape` | true, false | false | Turns the paper on its side. | @page { size: A4 landscape } |
| `pdf_margin` | a length in mm, cm, in or px; a bare number is pixels | no margin | The margin on all four sides. | @page { margin: 20mm } |
| `pdf_margin_top, _right, _bottom, _left` | the same lengths | the value of pdf_margin | One side at a time. Each wins over pdf_margin for its side. | @page { margin-top: 20mm } |
| `pdf_print_background` | true, false | true | Prints background colours and images. | print-color-adjust: exact, and "Background graphics" in a print dialog |
| `pdf_fit_one_page` | true, false | false | One PDF page as tall as the content, up to 150 inches (14,400 px). Paper format and landscape are not used. | @page { size: <width> <content height> } |
| `media_type` | screen, print | screen | Which set of styles the page is drawn with. | @media screen and @media print |

The paper comes from `pdf_paper_format`. The API adds no header, footer or page numbers of its own, and it has no separate PDF zoom option.

```bash
curl "https://curlshot.com/api/v1/screenshot?access_key=YOUR_ACCESS_KEY\
&url=https://example.com\
&format=pdf\
&media_type=print\
&pdf_paper_format=a4\
&pdf_margin=20mm" \
  --output page.pdf
```

The request above returns `page.pdf`: the print layout of the page on A4 with a 20 mm margin, which leaves a content area of 170 × 257 mm. More: [PDF rendering](https://curlshot.com/docs/pdf), [How to archive pages as PDF](https://curlshot.com/docs/guides/archive-pages-as-pdf), [Save a web page as a PDF](https://curlshot.com/tools/website-to-pdf).

## Glossary

- **Page box**: The rectangle CSS lays one printed page out in. It maps to one side of a sheet of paper and is made of the page area in the middle and the margin around it.
- **Page area**: The content area of the page box: the paper minus its margins. The page area of the first page sets the width the whole document is laid out in.
- **Margin box**: One of the 16 boxes that divide the margin of a page: four corners and three along each edge, such as @top-center and @bottom-right. Running headers and page numbers go there.
- **Bleed**: The extra band outside the trimmed page that ink is allowed to run into, so a colour that reaches the edge has no white sliver after the paper is cut. It matters for commercial printing, not for a PDF read on a screen.
- **CSS pixel**: The px unit: exactly 1/96 of a CSS inch. On paper a CSS inch is a real inch, so 96 CSS pixels cover 25.4 mm whatever the resolution of the printer.
- **Point**: The pt unit: 1/72 of an inch, so 1 pt is 1.3333 px and 12 pt is 16 px. PDF files measure pages in points: A4 is 595 × 842 pt.
- **Print media**: The media type a browser uses when it prints or saves a PDF. Rules inside @media print apply and rules inside @media screen do not.

## Questions

### What size is A4 in pixels?

A4 is 794 × 1123 CSS pixels at 96 pixels per inch (793.70 × 1122.52 before rounding). At 72 per inch, the unit PDF files use, A4 is 595 × 842 points. At 300 dots per inch, a common printer resolution, the same sheet is 2480 × 3508 dots.

### What size is US Letter in pixels?

US Letter is exactly 816 × 1056 CSS pixels at 96 pixels per inch, because it is defined in inches: 8.5 × 11. In points it is 612 × 792, and in millimetres 215.9 × 279.4.

### Why does my web page look different when I save it as a PDF?

Three things change. The browser switches to the print media type, so rules inside @media print apply. Background colours and images are left out unless background printing is on. And the layout becomes as wide as the paper minus its margins, about 794 pixels for A4, so the page picks its tablet or phone layout.

### How do I set the page size and margins of a PDF with CSS?

Use the @page rule: @page { size: A4; margin: 20mm } sets the sheet and the margin of every page. The size takes a keyword such as A4, A3, A5, letter or legal, optionally with portrait or landscape, or two lengths such as 210mm 297mm.

### How do I stop a page break from splitting a table row or an image?

Set break-inside: avoid on the element, for example on tr, figure or a card. It works in Chrome, Firefox and Safari. To start a section on a new page use break-before: page. The older page-break-inside and page-break-before properties are aliases of these and still work.

### Can CSS add page numbers to a PDF?

In Chrome 131 and later, yes: put content: counter(page) " / " counter(pages) in a page margin box such as @bottom-right inside @page. Firefox and Safari do not support margin boxes, so there the numbers come from the print dialog or from the tool that makes the PDF.

### Which paper sizes does CurlShot support for PDF?

CurlShot accepts a0, a1, a2, a3, a4, a5, a6, letter, legal, tabloid and ledger in pdf_paper_format, with a4 as the default. pdf_landscape turns the sheet, pdf_margin sets the margins, and pdf_fit_one_page puts the whole page on one sheet as tall as the content.

## Sources

1. W3C, "CSS Paged Media Module Level 3 (Working Draft, 14 September 2023)": https://www.w3.org/TR/css-page-3/ (checked 11 October 2026)
2. MDN Web Docs, "<length>: absolute length units": https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length (checked 11 October 2026)
3. MDN Web Docs, "@page: the size descriptor": https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@page/size (checked 11 October 2026)
4. Chrome for Developers, "Add content to the margins of web pages when printed using CSS": https://developer.chrome.com/blog/print-margins (checked 11 October 2026)
5. MDN Web Docs, "break-before": https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/break-before (checked 11 October 2026)
6. MDN Web Docs, "widows": https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/widows (checked 11 October 2026)
7. MDN Web Docs, "print-color-adjust": https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust (checked 11 October 2026)
8. Playwright, "Page.pdf(): paper formats, margins and defaults": https://playwright.dev/docs/api/class-page (checked 11 October 2026)
9. Unicode Consortium, "CLDR supplemental data: paperSize": https://raw.githubusercontent.com/unicode-org/cldr/main/common/supplemental/supplementalData.xml (checked 11 October 2026)
10. W3C, "CSS 2, chapter 17: tables (table-header-group)": https://www.w3.org/TR/CSS2/tables.html (checked 11 October 2026)
11. MDN Web Docs, "Printing": https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing (checked 11 October 2026)
12. MDN browser-compat-data, "Browser compatibility data for @page (with the break-*, orphans, widows and print-color-adjust files beside it)": https://raw.githubusercontent.com/mdn/browser-compat-data/main/css/at-rules/page.json (checked 11 October 2026)

## Go deeper

- [Save a web page as a PDF](https://curlshot.com/tools/website-to-pdf)
- [Convert HTML to PDF](https://curlshot.com/tools/html-to-pdf)
- [URL to PDF API](https://curlshot.com/tools/url-to-pdf-api)
- [Turn Markdown into a PDF](https://curlshot.com/tools/markdown-to-pdf)
- [PDF rendering: every option](https://curlshot.com/docs/pdf)
- [How to archive pages as PDF](https://curlshot.com/docs/guides/archive-pages-as-pdf)

## Read next

- [PNG, JPEG, WebP or PDF for website screenshots](https://curlshot.com/blog/png-jpeg-webp-pdf-for-screenshots.md): A decision flow, a comparison table and our own file-size measurements for choosing PNG, JPEG, WebP or PDF when you save a screenshot of a web page.
- [Capture a web page as evidence that holds up](https://curlshot.com/blog/web-page-as-evidence.md): A checklist for saving a web page as a credible record: what to capture, how to fix the time with a hash and timestamp, and what makes a screenshot weak.
- [Viewport sizes cheat sheet: phones to desktops](https://curlshot.com/blog/viewport-sizes-cheat-sheet.md): Viewport sizes in CSS pixels, screenshot sizes and device pixel ratios of iPhone, Pixel, Galaxy, iPad and laptop screens, drawn to scale, and the sizes to test.