HTML多页打印边距问题：CSS设置仅首页生效其余页面无效

Hey there! I totally get how frustrating it is when your print styles only work on the first page—let's fix this right away.

The problem with using body margins for print is that browsers treat the body as a single continuous element. Once content paginates, those top/bottom margins don't repeat for subsequent pages. Instead, you need to use CSS's dedicated print page rule: @page.

Here's the corrected CSS that will apply your margin settings to every printed page:

@media print {
  /* Use @page to define margins for ALL print pages */
  @page {
    margin-top: 50mm;
    margin-bottom: 50mm;
    margin-left: 0mm;
    margin-right: 0mm;
  }

  /* Optional: Reset body's default margins/padding to avoid conflicts */
  body {
    margin: 0;
    padding: 0;
  }
}

Why this works: #

• The @page rule is specifically designed for controlling print layout. It targets every individual page generated during printing, so your margins will be consistent across all pages.
• Resetting the body's margins ensures there's no overlap or unexpected spacing from default browser styles that might interfere with your @page settings.

Quick additional tips: #

• If you have fixed-position elements (like custom headers/footers), adjust their print styles too—use position: fixed with top/bottom values that account for your @page margins.
• Test in multiple browsers (Chrome, Firefox, Edge) since print rendering engines can have minor differences. Always check the print preview before sending to a printer!

内容的提问来源于stack exchange，提问作者RJV