打印预览中margin消失、元素溢出、边框不见，根本原因是浏览器打印引擎绕过屏幕样式，box-sizing、margin、border等需在@media print中显式声明且不可继承；必须用物理单位、重置浮动、启用color-adjust: exact，并通过真实ctrl+p验证。
打印预览里 margin 消失、元素溢出、边框不见——不是你 CSS 写错了，是浏览器压根没用你写的盒模型规则。 默认情况下，打印媒体会绕过大部分屏幕样式，box-sizing、margin、border 都可能被重置或忽略，必须在 @media print 里显式声明，且不能依赖继承。
为什么 margin 在打印预览里“突然没了”
Chrome 和 Edge 默认把 body 的 margin 设为 0；Firefox 更进一步，连普通 div 的外边距都可能塌陷。这不是 bug，是打印引擎主动剥离了“屏幕友好型”布局逻辑。
- 别只写
margin: 1cm这种简写——方向性塌陷常见，优先拆成margin-top: 1.5cm、margin-bottom: 1cm - 改完 CSS 后必须重新打开打印预览（Ctrl+P / Cmd+P），仅刷新页面不触发样式重载
- 如果用了 CSS-in-JS 或框架（如 styled-components），确认它支持
media="print"注入，否则规则根本不会生成
box-sizing: border-box 在打印中是否生效
生效，但前提是它被显式写进 @media print 块里。打印引擎不继承屏幕的 box-sizing 行为，尤其当父容器用了 reset.css 或未声明时，div 仍按 content-box 解析，导致 width: 100% + padding: 8px 实际超出纸张宽度。
- 在
@media print开头加* { box-sizing: border-box !important; }，覆盖所有后代 - 对核心打印区域（如
.print-area）再单独声明一次box-sizing，防被第三方样式干扰 - 避免用
max-width配合margin: auto居中——打印时max-width常被忽略，直接用width: 21cm（A4 宽）+margin: 0 auto
表格、卡片等容器跨页断裂怎么办
打印时表格被截断、卡片内容分到两页、页脚卡在中间——多数源于盒模型未控制分页行为，而非样式丢失。
- 给表格加
break-inside: avoid !important，防止行内断裂（注意 IE 不支持） - 给卡片类容器加
break-inside: avoid !important，但若其父容器是flex或grid，该规则会失效，需先重置父容器为display: block !important - 检查父级是否有
overflow: hidden——打印下它会截断内容，改为overflow: visible !important - 对易跨页结构（如发票节、报告段落），用
break-before: page !important显式分页，比依赖自然流更可控
背景色、边框为什么在打印预览里“看不见”
Chrome 打印预览默认关闭“背景图形”，background-color、background-image 全部清空；而边框消失往往是因为未在 @media print 中显式声明 border，或被 border-collapse: collapse 干扰。
- 打开 Chrome 打印预览 → 点右上角「更多设置」→ 勾选「背景图形」，否则任何背景都会白屏
- Bootstrap 表格要加
border-collapse: collapse !important和border: 1px solid #000 !important，否则边框可能被合并掉或变虚 - 别依赖
bg-gray-100这类 Tailwind 类——除非你在tailwind.config.js中启用了print:变体并写进了@media print块 - 颜色尽量用十六进制（
#000）而非命名色（black），部分引擎对后者解析不稳定
最常被忽略的一点：打印样式不是“屏幕样式的微调”，而是整套独立渲染路径。哪怕只改一个 margin-top，也得确保它落在 @media print 作用域内，并经过真实打印预览验证——DevTools 的 media 模拟无法反映分页、边框、背景的真实表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
