Printed Invoice Misaligned Compared to Print Preview – How to Fix?

Hi developers,

I'm working on a web-based invoice application (Angular/HTML/CSS based), and I have an issue during printing:

🖨️ Problem:

• The print preview shows the invoice perfectly aligned with correct fonts, layout, and spacing.
• But when I actually print it, the alignment is off, some text overflows or gets clipped, and occasionally the ink prints unevenly (bold/faint).

🎯 My Setup:

• Printed from Google Chrome (latest)
• HTML/CSS-based invoice template
• Using @media print CSS rules for styling the print view

✅ What I've Tried:

• Adjusted page margins using CSS
• Set @page size and margins
• Checked printer settings (A4, scaling: 100%, margin: none)
• Disabled headers/footers in print dialog
• Tested on different printers and browsers

❓ What I want to know:

• What are the common causes of mismatch between print preview and printed output?
• Are there any best practices for ensuring consistent print layouts in HTML?
• Is this a CSS/HTML issue, printer driver issue, or browser-related?

Any help or resources would be appreciated!

Thanks 🙏