@page的margin仅定义纸张物理边距，不约束内容区尺寸；width:100%参照可用宽度计算，若未显式设body宽度或处理padding/border，内容易横向溢出被截断。
为什么 @page 设置的 margin 会导致内容被截断？
浏览器打印时，@page 定义的是「页面盒（Page Box）」的物理边距，但它不自动约束内容区域尺寸。如果你只写 @page { margin: 0.5in; }，而 body 仍用 width: 100%，那这个 100% 是基于 UA 暗中计算的“可用宽度”——它可能比 A4 实际内容宽（8.3in）还大，尤其当页面有 padding/border 或缩放时，内容就会横向溢出、被裁剪。
-
@page的 margin 不会“挤压”内容区，只是在纸张边缘留白 - 内容容器必须显式匹配物理可用宽度，否则 overflow:hidden 也救不了
- Chrome/Firefox 在高 DPI 屏幕上对
px单位的解析偏差，会让width: 800px在 A4 上实际超出
如何让内容区严格适配 A4 纸张内边距？
关键不是调 @page，而是同步控制「纸张尺寸 → 页面盒边距 → 内容区宽度」三者关系：
- 显式声明纸张：
@page { size: A4; margin: 0.4in; } - 计算内容宽度：A4 宽 8.5in，减去左右 margin（0.4in × 2），得 7.7in；但为防四舍五入误差，常用
8.3in（即 8.5 − 0.2）作为安全上限 - 主容器设固定宽度：
body { width: 8.3in; margin: 0 auto; } - 所有卡片、表格等块级元素用
max-width: 8.3in，不用width: 100%，避免 padding/border 累加撑破 - 禁用
vw/vh—— 打印中未定义，会被忽略或归零
带 padding 的块为什么更容易被推到下页？
padding 本身不触发分页，但它增加元素总高度（content + padding + border），而浏览器分页判断只看这个总高度是否能完整放进当前页剩余空间：
- 前一个元素底部距页底只剩 10px，你给下一个
.card设了padding-top: 16px，它就必然被整块推到下一页 -
margin有折叠可能，padding永远实打实占位 - 解决方案不是删 padding，而是用
break-inside: avoid-page锁住整个盒模型（含 padding 区域）
正确写法：@media print { .card { padding: 0.2in; break-inside: avoid-page; } }
错误写法：.card { padding: 0.2in; }（没加任何分页控制）
Grid/Flex 容器里的子项怎么防止被分页截断？
break-inside: avoid-page 对 grid/flex 容器完全无效，因为分页机制只检查块级子元素，而 grid-item 和 flex-item 不是块级上下文：
- 必须把
break-inside加在每个直接子项上，例如：.grid > div { break-inside: avoid-page; } - 子项需是块级语义（
display: block或原生块标签如section、article），不能是inline或inline-block -
gap会放大间距风险，打印样式中应设gap: 0，改用margin-bottom控制间隔 - Safari ≤16.4 需降级：
@supports not (break-inside: avoid-page) { .grid > div { page-break-inside: avoid; } }
复杂点在于：你得同时考虑语义层级、display 类型、浏览器支持范围和单位一致性——漏掉任一环，截断就发生在最意想不到的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
