How to Set PDF Margins for Web Page Exports

Short answer: For a single export, open the browser print dialog, choose Save to PDF, change Margins, and inspect the preview. For repeatable exports, use print CSS with @media print and @page. Set a uniform margin such as 15mm, or define top, right, bottom, and left values separately.

Choose the right method

Need	Best method	Who controls it
One PDF right now	Browser print dialog	Person exporting
Consistent exports from a site or app	Print stylesheet and `@page`	Developer
Automated PDFs from a backend	PDF-capable capture API	Application code

Set margins for a one-off browser export

Open the page you want to export.
Open the browser’s print dialog.
Set the destination to Save to PDF.
Open the additional settings area and change Margins.
Check paper size, scale, orientation, headers, footers, and background printing where those controls are available.
Review every page in the preview, then save the PDF.

Firefox documents Save to PDF, margin controls, paper size, scale, print format, headers and footers, and background printing in its print settings guide: How to print web pages in Firefox. Browser labels and available controls differ.

How to judge the preview

Text and images should not touch the printable edge.
Headings should not be stranded at the bottom of a page.
Tables and code blocks should fit the selected paper width.
Images should retain their intended aspect ratio.
Automatic URL, title, date, and page-number headers or footers should not collide with your content.

Set reusable margins with print CSS

Use a print-only stylesheet when the same page will be exported repeatedly. You can link a separate stylesheet with media="print" or place rules in an existing stylesheet inside @media print. MDN documents both approaches and the @page rule for printed page dimensions, orientation, and margins: Printing – CSS and @page.

<link rel="stylesheet" href="print.css" media="print">

@media print {
  @page {
    margin: 15mm;
  }

  body {
    color: #000;
    background: #fff;
  }
}

margin: 15mm is an example used in PDF stylesheet guidance; it is not a universal best value. Measure your content and verify the rendered PDF.

Use different values on each side

@media print {
  @page {
    margin: 20mm 15mm 20mm 25mm;
  }
}

The four-value shorthand is ordered top, right, bottom, left. Write longhand when clarity matters:

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

Set paper size and orientation

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

@media print {
  .screen-only {
    display: none;
  }
}

Use a paper size and orientation that match the receiving workflow. The browser or export engine can still apply user preferences, so always inspect the actual PDF.

Use a separate print stylesheet

/* print.css */
@page {
  size: Letter portrait;
  margin: 0.6in 0.65in 0.7in;
}

@media print {
  nav,
  .cookie-banner,
  .interactive-controls {
    display: none !important;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}

Asymmetric and page-specific margins

Reports with a binding gutter, cover page, or facing pages may need different margins. The :left, :right, and :first page selectors are documented for page-specific rules, but support depends on the browser or PDF engine.

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

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

@page :first {
  margin-top: 30mm;
}

Use these selectors only after checking the target renderer. Atlassian’s Confluence PDF stylesheet documentation shows similar side and first-page examples: Customise Exports to PDF.

Margins, headers, and footers are separate controls

Authored CSS and browser-generated print metadata can appear together. Chrome documents that automatic headers and footers may remain when there is enough space, while its print dialog provides a control to turn them off: Add content to the margins of web pages when printed using CSS. Very small or zero page margins can leave no room for those automatic items.

If the URL, title, date, or page number crowds the document, turn off browser headers and footers in the print dialog or increase the page margin. Do not assume that CSS margin content replaces the browser’s own metadata.

Prepare a page for predictable PDF output

Define the paper size and orientation.
Set page margins with @page.
Hide navigation, controls, popups, and other screen-only elements in @media print.
Check long headings, tables, code, and images at the chosen paper width.
Preview in the browser or export engine used by your users.
Compare the saved PDF, not only the preview, before shipping the stylesheet.

Or skip the browser setup

ScreenshotNeo can create automated page captures and PDFs through one request. Its PDF options include paper size, margins, landscape mode, and page ranges; see the ScreenshotNeo documentation for the current parameter names and examples.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Before capture, cookie and consent banners, newsletter popups, and chat widgets are removed. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.

Troubleshooting PDF margins

Symptom	Likely cause	Fix
Content is clipped	Margins, scale, or paper size leave less printable width than expected.	Check preview, choose the intended paper size, reduce scale slightly, or reduce the CSS margin.
Headers or footers overlap content	Browser-generated metadata is enabled.	Disable headers and footers in the print dialog or increase the page margin.
CSS margins appear ignored	The export engine applies user settings or has incomplete `@page` support.	Test the exact target browser or engine and provide dialog settings for one-off exports.
First page has the wrong spacing	`@page :first` is unsupported or overridden.	Inspect computed print rules and use a wrapper or page-break strategy supported by the target engine.
Backgrounds disappear	Background printing is disabled.	Enable background printing in the dialog when visual backgrounds are required.
Tables or code run off the page	Screen layout is wider than the printable area.	Add print-specific widths, allow wrapping, and verify at the selected paper size.
Different browsers produce different PDFs	Dialog defaults and CSS feature support vary.	Standardize the export engine for automation and keep a browser preview checklist for manual exports.

Performance, reliability, and cost considerations

Browser export: Manual exports cost no service fees, but results depend on the operator’s browser settings and the page’s print CSS.
CSS: Print styles make repeated exports consistent, yet the receiving renderer still controls support for page selectors and margin behavior.
Automation: Use a fixed paper size, margin policy, and renderer. Wait for the page’s content to finish loading before capture, especially when images or fonts load asynchronously.
ScreenshotNeo billing: Only clean shots are billed. Failed loads, blank pages, bot checks, timeouts, and cache hits are not billed, with the verdict exposed in response headers.
Caching: ScreenshotNeo supports a cache with a TTL you choose; use it when the source page does not change frequently.

FAQ

What margin should I use?

There is no universal value. Start with a readable value such as 15mm, then adjust for paper size, binding, headers, and the density of your content.

Can CSS force a user’s print dialog margins?

CSS can provide print rules, but browser settings and renderer support still affect the final PDF. Preview the output in the target environment.

Should I use millimeters, inches, or pixels?

Use physical units such as millimeters or inches for paper output. They communicate the intended printed size more clearly than screen units.

Why does the PDF have more space at the top?

Check both @page margins and browser-generated headers or footers. Either can add space above the document.

Can I export only selected PDF pages?

Yes. Browser dialogs commonly provide a page-range control, and ScreenshotNeo supports PDF page ranges. Check the relevant renderer or the ScreenshotNeo docs for exact controls.