盒模型中line-height决定文本垂直空间，影响容器高度与对齐。① line-height大于font-size时，多余空间均分上下，形成自然留白；② 块级元素内容高度由line-height主导，非font-size；③ 行内元素高度由line-height决定，height无效；④ 多个行内元素共存时，取最大line-height确定行框高；⑤ 单行文本垂直居中可设line-height等于容器高；⑥ 多行文本需结合padding、margin或flex布局控制整体高度。掌握此关系可提升UI对齐精度。
在CSS布局中，盒模型和line-height看似属于不同范畴，但实际上它们在文本的垂直空间控制上紧密相关。理解它们之间的关系，有助于更精确地控制文本在容器中的垂直对齐与高度分布。
盒模型中的高度计算受 line-height 影响
每个HTML元素都遵循CSS盒模型，包含内容区（content）、内边距（padding）、边框（border）和外边距（margin）。对于包含文本的块级元素，其可视高度往往不是由font-size直接决定，而是受到line-height的显著影响。
例如：
div {
font-size: 16px;
line-height: 24px;
padding: 0;
border: 0;
}
尽管font-size是16px，但每行文本实际占用24px的行高。如果该div只有一行文本，其内容区域的高度就是24px，这会直接影响整个盒模型的总高度。
立即学习“前端免费学习笔记（深入）”；
line-height 如何分配垂直空间
line-height并不是简单地从字体基线往下加固定值，而是将额外的空间平均分配到文字上下两侧。这种机制决定了文本在行框（line box）中的垂直居中感。
- 若
line-height大于font-size，多出的部分被分为两半，一半加在文字上方，一半加在下方。 - 这使得即使没有设置
padding，文本也不会紧贴容器顶部或底部，形成自然的垂直留白。
这种特性在按钮、输入框或导航栏中尤为明显——开发者常依赖line-height来实现文本的“视觉垂直居中”。
inline 元素的盒模型与 line-height 的交互
对于行内元素（如span），其高度完全由line-height决定，height属性不生效。此时，行高直接参与构建行框的高度。
多个行内元素在同一行时，浏览器会取其中最大的line-height（或行高对应的内容高度）来确定整行的高度。这可能导致意外的布局膨胀，尤其当混合使用不同字号或vertical-align设置时。
控制文本垂直对齐的实际建议
为了更可控地管理文本的垂直空间，可以结合以下方法：
- 使用
line-height等于容器高度，实现单行文本垂直居中（常见于按钮或导航项）。 - 避免过度依赖
line-height来撑开容器高度，必要时用padding配合固定line-height。 - 在多行文本场景中，注意
line-height累积对整体盒高影响，合理设置margin或flex布局进行调节。
基本上就这些。掌握line-height如何融入盒模型，能让你在处理文本布局时少踩很多坑，尤其是在需要精准对齐的UI组件中。不复杂但容易忽略。
