能，line-height: 1 使行框高度等于 font-size，无额外上下留白；但仅适用于纯文本、单行、无 inline 元素的场景，中文字体易顶边，且受字体 metrics 和 box-sizing 影响。
line-height: 1 真的能压平容器高度吗
能，但只在特定条件下成立——它让行框高度严格等于当前 font-size，不额外留 ascent/descent 空间。可一旦字体本身 metrics 异常（比如某些 Web Font 的 descent 值极大），或容器内含 img、input 等 inline 元素，line-height: 1 就会失效，甚至放大错位。
实操建议：
-
line-height: 1仅适用于纯文本、单行、无内联混合内容的场景（如徽标文字、按钮内文） - 若父容器有
padding或border，需同步确认box-sizing: border-box，否则视觉高度仍会超预期 - 中文字体慎用
line-height: 1：思源黑体、Noto Sans SC 等多数中文字体实际字身高度 ≈ 0.8–0.85×font-size，设为 1 后文字会“顶到顶部”，视觉上反而像被裁剪
vertical-align 不生效？先确认 display 类型
vertical-align 只对 display: inline、inline-block、inline-flex、table-cell 生效，对 block 或 flex（非 inline 版本）完全无效。很多开发者调了半天 vertical-align: middle 没反应，其实是把属性写在了 div 上，而它默认是 display: block。
常见错误现象：
- 给
div设vertical-align: middle，毫无作用 - 浮动布局中多个
inline-block元素高度不齐，只因其中一个漏写了vertical-align -
img在inline-flex容器里底部留白，本质是它默认vertical-align: baseline，为 descender 预留空间
解决办法很简单：
- 所有
img、input、button显式加vertical-align: middle或vertical-align: top - 若用
inline-flex做行内工具栏，必须给容器自身也加vertical-align: top，否则整个容器会随首个子项基线浮动
line-height 和 vertical-align 组合微调时的像素级陷阱
当容器高度固定（比如 height: 40px）、字体大小已知（比如 font-size: 14px），靠 line-height: 40px + vertical-align: middle 仍可能偏 1–2px，这不是 bug，而是浏览器对字体 ascent/descent 的实际采样值与理论值存在偏差。
调试关键点：
- 打开 Chrome DevTools → Computed → 找到
line-height对应的实际像素值（常不是整数） - 在 Metrics 面板看 “Baseline” 距离容器顶部的像素（例如显示 28.34px，而你期望的是 20px）
- 不要直接用
top: -2px这类猜测值；优先用transform: translateY(-50%)+top: 50%，它基于元素自身高度计算，更稳定 - 避免混用
line-height和flex align-items：二者作用机制冲突，flex会覆盖line-height的行框居中逻辑
Web Font 加载后行高跳变怎么稳住
后备字体（如 system-ui）和 Web Font（如 @font-face 引入的 Inter）的 ascent/descent 比例不同，line-height: 1.4 在两套字体下渲染出的实际像素高度可能差 2–3px。用户看到的就是文字“突然上浮”或“下沉”。
真正有效的压制方式：
- 用
font-display: optional或font-display: swap控制加载行为，避免闪动 - 在
@font-face中显式声明ascent-override和descent-override（Chrome/Edge 支持，Firefox 尚未支持） - 更通用的做法：给文本容器设固定
height+overflow: hidden，再用padding-top/padding-bottom替代line-height做垂直空间分配 - 避免在
line-height已设死的容器里塞vertical-align: text-bottom这类语义模糊值——它依赖字体度量，加载前后行为不可控
最易被忽略的一点：行高偏差从来不是单一属性的问题，而是 font-size、line-height、vertical-align、display 类型、字体 metrics 四者耦合的结果。改其中一个，得同步检查另外三个在当前上下文中的实际表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
