label是行内元素，不生成独立行框，其line-height仅作用于所在行框而非自身，故直接设置通常无效；必须通过display: inline-block/block/flex改变盒模型后，line-height才生效。
label 是行内元素，默认不形成独立行框，直接设 line-height 通常无效或表现异常——它只在 label 变成块级/行内块级布局后才起作用。
为什么直接给 label 设 line-height 没反应
浏览器对纯 label（未修改 display）的 line-height 处理很弱：它不生成独立行框，而是依赖父容器的行高上下文。即使写了 line-height: 2，DevTools 的 “Computed” 面板也常显示为 normal 或继承值，不是你写的数字。
- 常见错误现象：
label文字贴顶、上下留白不一致、和旁边input垂直不对齐 - 根本原因：默认
display: inline，line-height只影响其所在行框的内部基线位置，不撑开自身高度 - 验证技巧：在 DevTools 中选中
label，看 “Computed” 里的line-height是否真被应用，而不是只扫一眼 “Styles” 里有没有那行 CSS
让 label 的 line-height 生效的三种可靠方式
必须先改变它的盒模型行为，再配合适当的 line-height：
-
display: inline-block+line-height：最常用，适合与input并排时对齐；需同步设vertical-align: middle避免基线偏移 -
display: block+line-height：适合独占一行的label（如表单标题），此时line-height控制整行文本高度，配合margin-bottom控制段距更合理 -
display: flex+align-items: center：彻底绕过line-height，用 Flex 垂直居中；此时line-height可设可不设，仅影响多行文本内部行距
label 里含图标或复选框时的特殊处理
一旦 label 内嵌 input[type="checkbox"] 或 <img>，它的内容就不再是纯文本流，line-height 对整体高度的控制力进一步下降：
- 图片高度会主导行高，
line-height只调节文字部分的基线位置 - 复选框默认是 baseline 对齐，容易导致
label文字下沉；优先用vertical-align: middle或top调整 - 若要统一高度，建议给
label设固定height+display: flex+align-items: center，比死磕line-height更稳定 - 避免在
label上同时设height和line-height：前者可能截断文字，后者可能被忽略
真正容易被忽略的一点
label 的视觉行高，往往不是由它自己决定的，而是由它所在的上下文行框（比如包裹它的 div 或 form）以及兄弟元素（尤其是 input）共同挤压出来的。想靠单个 label { line-height: 1.5 } 解决所有对齐问题，几乎注定失败；实际项目中，90% 的 label 行高问题，根源在父容器或兄弟元素的 padding、font-size 不一致，或者忘了加 box-sizing: border-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
