CSS Print Styles: Using @page, size, and margin Rules

CSS print styles let you control how a web page looks when someone prints it or saves it as a PDF. The @page rule is the main tool for setting page size, page margins, and other print-page options.

Quick answer: Use @media print for print-only styling, and use @page to define page-level settings such as size and margin. Browsers support some print features well, but not every page feature is implemented consistently.

Difficulty: Beginner

You'll understand this better if you know: basic CSS selectors, how @media queries work, and the difference between screen and print layout.

1. What Is CSS Print Styles?

CSS print styles are rules that apply when a page is printed or rendered in print preview. They help you remove screen-only UI, improve readability, and control page formatting for paper or PDF output.

@media print targets printed output.
@page targets the page box itself, not an element on the page.
size can request a page format such as A4 or letter.
margin controls the outer page margins for printed pages.
Print styles are useful for documents, invoices, reports, articles, and forms.

Unlike normal CSS, print styling is less about interactive layout and more about clear, paginated output. The browser decides how to paginate content, but you can guide the result.

2. Why CSS Print Styles Matter

Many web pages look good on a screen but waste paper, cut off content, or print with navigation, ads, and buttons included. Print styles solve that by making the page cleaner and more useful when printed.

You should use them when your site includes content people may want to keep, share, archive, or annotate on paper.

Articles can print without sidebars and menus.
Receipts and invoices can fit neatly on a page.
Documentation can print with readable spacing and headings.
Forms can print with borders and labels that remain visible.

They matter less for highly interactive apps where printing is not a core use case, but even those apps often benefit from a basic print stylesheet.

3. Basic Syntax or Core Idea

The core idea is simple: use @media print for styles that should only apply during printing, and use @page for page-level formatting.

Minimal example

This example hides navigation when printing and sets page margins with @page.

@media print {
  nav,
  button {
    display: none;
  }
}

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

The @media print block hides screen controls, while @page tells the browser to use A4-sized pages with a 20 mm margin where supported.

What each part does

@media print applies only in print mode.
nav, button targets elements that are usually not useful on paper.
display: none removes those elements from the printed page.
@page sets rules for each printed page.
size requests the paper format.
margin sets the page edge spacing.

4. Step-by-Step Examples

Example 1: Print a clean article

If you are printing an article, the main job is usually removing clutter and improving text flow.

@media print {
  header,
  footer,
  aside {
    display: none;
  }

  article {
    width: 100%;
    color: #000;
  }
}

@page {
  margin: 18mm;
}

This keeps the article text and removes the surrounding layout. The page margins help the content avoid the paper edges.

Example 2: Set a specific page size

Some documents need a particular paper size, such as A4 for a report or letter for North America.

@page {
  size: letter;
  margin: 1in;
}

This requests letter-size pages with one-inch margins. If the browser or printer does not fully honor the request, the print dialog may still let the user override it.

Example 3: Print a report with better spacing

Long reports need headings, lists, and paragraphs to stay readable across page breaks.

@media print {
  h1,
  h2 {
    page-break-after: avoid;
  }

  p,
  li {
    line-height: 1.5;
  }
}

This reduces awkward breaks after headings and improves legibility. Modern print layout also recognizes newer break properties, but page-break-after is still seen in older CSS and browser examples.

Example 4: Create a form that prints clearly

Forms often need borders and visible labels when printed, even if the screen version uses minimal styling.

@media print {
  input,
  select,
  textarea {
    border: 1px solid #000;
    color: #000;
  }

  label {
    font-weight: 600;
  }
}

This helps the printed form remain fillable and understandable even if the screen version is more stylized.

5. Practical Use Cases

Print styles are especially useful in these situations:

News articles and blog posts that readers may print or save as PDF.
Invoices, packing slips, and receipts that need a paper copy.
Internal documentation with diagrams, steps, or checklists.
Application forms that users must review offline.
Legal or compliance pages where a clean printed record matters.

In each case, the goal is not to make the page look identical to the screen version. The goal is to make it readable and useful on paper.

6. Common Mistakes

Mistake 1: Using @page instead of @media print for element styling

@page sets page-level properties. It is not where you hide a navigation bar or restyle a button.

Problem: This rule tries to target page content with @page, but the browser ignores element selectors inside the page rule.

@page {
  nav {
    display: none;
  }
}

Fix: Put element styling inside @media print instead.

@media print {
  nav {
    display: none;
  }
}

This works because @media print is the correct place for content styling during printing.

Mistake 2: Expecting all browsers to honor exact page size settings

Page size is a request, not a guarantee. Users can often override it in the print dialog, and browsers may map it differently depending on the printer.

Problem: You may expect size: A4 to force every printout to be A4, but the final output can still depend on browser and printer settings.

@page {
  size: A4;
}

Fix: Treat size as a helpful default and test in the target browser print preview.

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

@media print {
  body {
    font-size: 11pt;
  }
}

The corrected version sets a sensible default and keeps the text readable even if the exact paper size changes.

Mistake 3: Forgetting that screen margins do not control printed margins

Beginners often try to use normal layout spacing and assume it will become the print margin. That does not always work, because print margins are controlled at the page level.

Problem: This code adds space inside the document, but it does not define the printed page margins reliably.

main {
  padding: 2rem;
}

Fix: Use @page for page margins and keep content spacing separate.

@page {
  margin: 20mm;
}

main {
  padding: 0;
}

This works because the printed page edge spacing is defined where the browser expects it.

7. Best Practices

Practice 1: Keep print rules small and focused

Print CSS is easiest to maintain when it only overrides what really needs to change. Avoid rewriting your entire layout for print unless necessary.

@media print {
  nav,
  aside,
  button {
    display: none;
  }
}

This is better than duplicating large parts of your screen layout. Small overrides are simpler to test and less likely to break.

Practice 2: Use readable units for print

Print layouts often work better with physical units such as mm, cm, in, or typographic units like pt.

@page {
  margin: 12mm;
}

@media print {
  body {
    font-size: 11pt;
  }
}

These units map more naturally to paper than viewport-based units, which are better suited to screens.

Practice 3: Test print preview early

Print CSS often behaves differently across browsers, so you should verify the result in print preview, not just in the normal page view.

@media print {
  img {
    max-width: 100%;
  }
}

Even a simple image rule can prevent overflow or clipping. Testing early helps you catch those issues before users do.

8. Limitations and Edge Cases

Browser support for @page is good for common properties like margin and size, but advanced page margin boxes are not consistently supported.
Some browsers treat size as a hint, while the print dialog or printer settings may override it.
Color output may differ from screen appearance, especially if the user enables grayscale or economy modes in the print dialog.
Large backgrounds and shadows are often reduced or omitted in print unless the user enables background printing.
Fixed-position headers and footers can repeat unexpectedly or overlap content in paginated layouts.
Older print properties such as page-break-before still appear in examples, but newer break properties are generally preferred for modern layouts.

One common surprise is that something can look correct on one browser but shift slightly on another. That is normal with print output, which depends on the browser’s pagination engine and the selected printer settings.

9. Practical Mini Project

Here is a small print-friendly article layout that hides interface elements, sets page margins, and keeps the main content readable.

@media print {
  header,
  nav,
  footer,
  button {
    display: none;
  }

  body {
    font-family: Georgia, serif;
    color: #000;
    line-height: 1.5;
  }

  article {
    width: 100%;
  }

  img {
    max-width: 100%;
  }
}

@page {
  size: letter;
  margin: 16mm;
}

This example combines the two main parts of print styling: content cleanup with @media print and page formatting with @page. It is small enough to adapt to an article, invoice, or documentation page.

10. Key Points

@media print is for styles that apply only when printing.
@page controls page-level settings such as margin and size.
size requests a page format like A4 or letter.
margin sets the printed page edge spacing.
Print CSS should remove clutter and improve readability, not mirror the screen layout exactly.
Browser print behavior varies, so always test in print preview.

11. Practice Exercise

Create a print stylesheet for a blog article page.
Hide the site header, navigation, and comment section.
Set the printed page size to A4 and the margin to 18 mm.
Make headings avoid awkward page breaks.
Keep images inside the page width.

Expected output: The article should print as a clean document with only the main content visible, consistent margins, and no clipped images.

Hint: Use @media print for content changes and @page for the page margin and size.

Solution:

@media print {
  header,
  nav,
  aside,
  .comments {
    display: none;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  img {
    max-width: 100%;
  }

  body {
    color: #000;
    line-height: 1.5;
  }
}

@page {
  size: A4;
  margin: 18mm;
}

This solution works because it separates print-only content changes from page formatting rules, which is exactly how browsers expect print CSS to be structured.

12. Final Summary

CSS print styles help you control how a page looks on paper or in print preview. The most important split is between @media print, which styles the page content, and @page, which styles the printed page itself.

For most projects, a good print stylesheet removes navigation and interactive controls, keeps the main content readable, and sets practical page margins. Start simple, test in print preview, and refine only the parts that improve the final paper output.

If you want to go further, the next useful topic is CSS page breaks and pagination behavior, especially how headings, images, and long content flow across printed pages.