如何设置CSS盒模型在打印时的宽高及边距？

本文共计726个文字，预计阅读时间需要3分钟。

请提供需要改写的伪原创开头内容，我将根据您的要求进行修改。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 显式为所有参与布局的容器设置 box-sizing: border-box !important，避免被 UA 样式覆盖
• 优先用 max-width / max-height 替代固定 width / height，防止内容溢出裁剪
• 避免依赖父容器的 padding 来“撑开”子元素——打印时父级 padding 可能被压缩或归零

打印时 margin 和 padding 被浏览器自动缩放或清零

多数浏览器（Chrome、Edge）在打印时会对 margin 做标准化处理：页边距由用户打印设置决定，CSS 中的 margin 仅影响元素间相对距离，且可能被缩放到 0.25–0.5 倍；padding 则常因 DPI 换算偏差导致视觉错位。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 用 @page 规则统一控制物理页边距：

  @page { margin: 0.5in; }

• 元素内间距改用 gap（对 flex / grid 容器有效）或 line-height（文本块）替代 padding
• 需要精确留白时，用透明 border 或伪元素 ::before 占位，比 margin 更可控

打印样式中 width 设为 100% 却超出纸张宽度

根本原因是：打印上下文中的 100% 是相对于「打印区域」（即 @page 内容区）计算的，而该区域宽度 = 纸张宽 − 左右 @page margin。若未声明 @page，浏览器按默认值（通常 0.39in）计算，容易造成换行异常或横向滚动。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 始终配对使用：

  @page { size: A4; margin: 0.4in; }<br>body { width: 100%; box-sizing: border-box; }

• 对表格等易撑破的元素，加 table-layout: fixed + width: 100%，并为 th/td 设置 max-width
• 禁用横向滚动：在 @media print 中给根元素加 overflow-x: hidden

打印样式不是屏幕样式的简单复制，盒模型各属性在物理输出阶段受页面尺寸、DPI、UA 默认策略三重干预，最易被忽略的是 @page 与元素 box-sizing 的协同关系——漏掉任意一环，都可能导致内容被截断或错页。