文字贴边关键在于用无单位line-height（如1.35）配合响应式font-size，使行盒高度随字号实时计算，避免line-height锁死导致上下空隙；需兼顾字体度量差异与inline元素对齐干扰。
文字贴合边缘不是靠“缩进归零”或“强行裁剪”，而是让行盒（line box）高度、字号、行高三者在不同视口下保持比例一致，同时避免父容器留白或溢出干扰。关键在于控制 line-height 的计算逻辑和 font-size 的响应方式。
为什么设置 margin: 0 和 padding: 0 还是不贴边
常见现象：清除了所有外边距和内边距，但文字顶部/底部仍留空，尤其在小屏上明显。根本原因不是 CSS 重置没做全，而是浏览器为文字自动预留了“行盒上下留白”——这部分由 line-height 决定，且与字体度量（ascent/descent）强相关。
-
line-height: 24px这类带单位值会锁死行高，当font-size缩小时（如从16px变成12px），行高仍为24px，多余空间就变成“看不见的顶部/底部空隙” - 系统字体（如 San Francisco、Segoe UI）在小字号下 ascent/descent 占比更高，
line-height: 1.2可能还不够紧凑，需微调 -
vertical-align: baseline是默认行为，但<img>或<inline-block>元素会拉高整行 line box，间接撑开文字上下距离
line-height 必须用无单位数值
这是让文字真正“随字号流动”的唯一方式。无单位值（如 1.4）是乘数，浏览器按当前元素的 font-size 实时计算像素值，并在继承时重新基于子元素字号再乘一次——这样嵌套的 <strong>、<em> 才不会破坏行盒一致性。
- 错误写法：
line-height: 20px、line-height: 120%、line-height: normal（后者 UA 默认值浮动，iOS 和 Android 差异可达 0.3） - 推荐写法：
line-height: 1.35（正文）、line-height: 1.25（标题）、line-height: 1.15（超小屏按钮文字） - 如果用
rem控制字号（如html { font-size: 100%; }），line-height就不能带单位，否则流式链条断裂
配合 font-size 响应策略收紧边缘
仅调 line-height 不够，font-size 本身也得随视口收缩，否则大字号+小行高会导致文字挤压。但直接用 vw 有兼容陷阱，需 fallback。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 10 以下不支持
font-size: 4.266667vw，必须用 JS 动态设document.documentElement.style.fontSize - 更稳妥做法：用媒体查询分段控制
font-size，例如@media (max-width: 480px) { body { font-size: 14px; line-height: 1.3; } } - 对齐顶部边缘时，可加
margin-top: -0.1em微调（注意是em，不是px），但仅用于局部修正，不可全局滥用
图片或图标混排时的额外干扰项
图文并排布局中，<img> 默认 vertical-align: baseline，其底缘会与文字基线对齐，导致上方留白远大于下方——这不是文字问题，是 inline 元素的对齐机制作祟。
- 解决方法：给
img加vertical-align: middle或vertical-align: text-bottom - 更彻底方案：把图文包裹进
display: grid容器，用align-items: center统一控制垂直位置 - 别用
float或position: absolute拉图片，它们会脱离行盒，反而放大错位风险
真正贴边的关键不在“删空白”，而在让每行文字的物理高度（由字号 × 行高乘数决定）始终匹配其内容视觉重心。一旦用了带单位的 line-height 或忽略字体度量差异，再精细的 margin 调整也只是补丁。
