文字紧贴盒子上下边仍有空隙是因line-height大于字体实际高度及字体ascent/descent区域所致；line-height:1非万能，需配合font-size、vertical-align或flex等综合处理。
为什么文字紧贴盒子上下边会有空隙
这不是你代码写错了，是浏览器默认给 <p>、<div> 里内联内容（比如文字）留了“呼吸空间”——本质是 line-height 大于字体实际高度，加上 font-family 自带的 ascent/descent 区域，导致文字视觉上被“托起”和“压低”。哪怕设了 margin: 0; padding: 0;，空隙还在。
用 line-height: 1 真的能完全消除上下空隙吗
不能一概而论。设 line-height: 1 是必要但不充分条件：
- 对纯英文或数字可能看起来贴边了，但中文、emoji、带重音符号的字符仍可能溢出
-
line-height: 1是按 font-size 计算的，如果字体本身设计有较大字身（em-box），顶部/底部依然有留白 - 某些字体（如
"PingFang SC"、"Segoe UI"）在 macOS/Windows 渲染时会额外加 buffer，仅靠line-height压不住
实操建议：line-height: 1 必须配合 font-size 和 vertical-align 控制；更稳妥的做法是加 overflow: hidden 或用 transform: translateY() 微调，但后者影响可访问性。
彻底清除默认间距的最小 CSS 组合
只清 margin 和 padding 不够。真实生效的组合要覆盖三类来源：
立即学习“前端免费学习笔记（深入）”；
- 用户代理样式表：针对
p、h1–h6、pre等标签重置margin和padding - 行盒行为：设
line-height: 1+vertical-align: top（对 inline 元素）或display: flex; align-items: flex-start（对块级容器） - 字体度量干扰：加
font-feature-settings: "kern";减少字距影响，或用text-rendering: optimizeLegibility;（非必需，但部分场景有用）
最简可靠写法示例：
div.text-tight {
margin: 0;
padding: 0;
line-height: 1;
font-size: 16px;
/* 防止父容器基线对齐产生的间隙 */
vertical-align: top;
}Flex 容器里文字贴顶贴底的坑
用 display: flex + align-items: flex-start 看似一劳永逸，但要注意：
- 如果子元素是
<span>这类 inline 元素，它仍受父级line-height影响，必须同时设line-height: 1 -
align-items: stretch（默认值）会让文字区域被拉伸，反而放大空隙 - 遇到
box-sizing: border-box和border时，border 会参与计算，导致视觉偏移，需用padding补偿而非依赖对齐
真正贴边的关键不是“对齐方式”，而是让文字所在行盒（inline box）的高度压缩到极限，并切断它和父容器基线的绑定关系。
字体度量是隐性变量，不同系统、不同字体、甚至同一字体的不同字重，都会让 line-height: 1 的实际效果浮动。别指望一套 CSS 通吃所有场景，得在目标设备+字体组合下实测。
