line-height 不直接撑大 inline-block 元素盒模型，但决定其内部行框高度；该行框由 line-height 与字体度量共同计算得出，成为内容区默认高度来源，影响最终视觉高度和对齐表现。
line-height 对 inline-block 元素到底起什么作用？
line-height 本身不直接“撑大” inline-block 元素的盒模型高度，但它会参与该元素内部行框（line box）的构建——而这个行框，就是 inline-block 内容区（content area）的默认高度来源。
关键点在于：inline-block 元素虽然脱离了纯行内流，但其内容仍按行内规则渲染。如果里面是纯文本或未设 height 的行内元素，浏览器就会用 line-height + 字体度量（ascent/descent）推算出一个最小内容高度，并以此作为它的 content box 高度。
常见错误现象：
- 给
span改成display: inline-block，却没设height，结果高度还是比预期高 - 父容器
font-size: 14px; line-height: 1.6;，子inline-block里只有一行文字，实际高度却是约22.4px（14 × 1.6），而非 14px
为什么设了 height 还会被 line-height 干扰？
因为 height 和 line-height 在 inline-block 中是不同层级的控制逻辑：
-
height控制的是整个盒模型的 content box 高度（box-sizing 为 border-box 时也含 padding） -
line-height控制的是内容区内部行框的垂直排布基准
当两者冲突时：
- 若
height小于line-height计算出的最小行框高度，文字可能被裁剪（overflow: visible时溢出，hidden时截断） - 若
height大于该值，多出的空间默认在顶部（除非配vertical-align: bottom或用padding均分） - 若同时设
line-height: 100%且height刚好匹配字体大小，文字才可能视觉居中，但依然受字体 ascent/descent 影响
inline-block 中 line-height 的数值类型怎么选？
必须用无单位数值（如 line-height: 1.5），理由很实际：
-
line-height: 20px是固定像素，子元素换字号后行高不会缩放，容易导致小字空隙过大、大字挤在一起 -
line-height: 150%继承的是计算后的像素值（比如父font-size: 16px→ 24px），子即使font-size: 12px仍用 24px，破坏比例 -
line-height: 1.5em是相对父font-size，嵌套深时极易失控，和150%行为一致，不推荐
正确做法：
- 父容器统一设
font-size和line-height: 1.5 - 子
inline-block只需继承，无需重写；若需微调，也用1.4或1.6这类乘数
如何让 inline-block 高度完全可控？
靠 line-height 永远是间接手段。真正想精确控高，得组合使用：
- 显式设
height+line-height: 100%（或1），并确保字体度量不越界 - 用
padding-top/padding-bottom替代行高来“伪造”留白，更稳定 - 对图标类
inline-block，优先用background-image或 SVG，避开文本行框机制 - 如果必须混排文字与图标，统一用
flex+align-items: center，绕开line-height和vertical-align的耦合陷阱
字体度量（ascent/descent）才是那个藏在 line-height 背后、从不声张却总在关键时刻加戏的角色。它不写进 CSS，但每次你看到“明明设了 height 却还是不对齐”，八成是它在作祟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
