line-height通过决定行框（line box）高度间接影响盒模型高度，而非直接撑开元素；块级容器在无显式height时，其content-box高度由内部行框堆叠撑开，行内元素则因不生成独立盒，其“高度”实为所在行框高度。
line-height 是怎么影响盒模型高度的
line-height 不会直接“撑高”元素，但它决定了行内内容在行框（line box）中的垂直对齐和行框自身的高度。当元素包含文本或行内内容时，浏览器会基于 line-height 计算出最小行框高度，而该行框又会参与父容器的 height 或 min-height 计算——尤其在块级容器中没有显式设置 height 时，最终容器高度往往由行框撑开。
常见错误现象：div 设置了 font-size: 14px 和 line-height: 2，但实际高度却远大于 28px；或者给按钮加了 line-height: 1 后文字贴顶、截断。
-
line-height的值是相对于当前元素的font-size计算的（除非用无单位数值），比如line-height: 1.5在font-size: 16px下生成 24px 行高 - 即使元素内没有文字，只要它有行框（比如空
<span></span>或伪元素::before），也会按line-height分配空间 - 块级元素本身不渲染行框，但其子元素（尤其是行内级）会触发行框生成，进而影响父元素的
content-box高度
为什么 inline 元素周围总有空白间隙
这个“空白”其实是行框上下留出的半行距（ascent + descent 空间），由 line-height 与字体度量共同决定。哪怕你把 font-size 设为 0，只要 line-height 不为 0，行框仍有高度，而行内元素默认按 baseline 对齐，就会在下方留下视觉间隙。
典型场景：多个 <img> 并排显示，底部总有一条小缝隙；inline-block 按钮之间莫名有空隙。
- 解决方法之一是设
vertical-align: top/middle/bottom，避开 baseline 对齐带来的偏移 - 更彻底的是让父容器使用
font-size: 0（再对子元素单独设字号），消除行框内部的字体度量干扰 - 或者改用
display: flex替代inline-block，绕过行框机制
line-height: normal 和数值的区别在哪里
line-height: normal 看似“没副作用”，其实最不可控——它依赖字体的 metric（如 ascent/descent）和用户代理样式表，不同字体、不同系统下结果差异很大。Chrome 和 Safari 对同一字体的 normal 计算可能差 2–4px；中文思源黑体和英文 Arial 的 normal 值也完全不同。
而 line-height: 1.4 这类无单位数值是确定的倍数关系，可预测、易复现。
- 避免在需要精确垂直居中或响应式排版的场景用
normal - 如果必须兼容多字体，建议统一用无单位数值，并通过
font-familyfallback 控制主字体 - 注意：百分比写法（如
line-height: 140%）等价于计算后继承，但会在继承链中“固化”为像素值，不如无单位灵活
如何让 line-height 不影响容器高度
核心思路是切断行框对块级容器高度的贡献。不是删掉 line-height，而是控制它的作用范围和渲染层级。
- 对纯图标按钮或空容器，用
font-size: 0+ 显式设置子元素字号，同时设line-height: 1防止子元素自带行高干扰 - 对需要垂直居中的文字，优先用
display: flex; align-items: center，而不是靠line-height == height这种脆弱方式 - 若必须用
line-height居中，确保父容器是inline-block或table-cell，且自身height固定，否则仍可能被子内容撑开
最常被忽略的一点：line-height 的影响只发生在有行内格式化上下文（IFC）的环境中。一旦父元素变成 flex 或 grid 容器，子元素的 line-height 就不再参与容器高度计算——但它依然影响子元素内部行框，比如多行文本的行间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
