line-height属性详解
定义
line-height属性是CSS中用于控制单行文本行高（包括文本内容本身及其上下间距）的属性。不仅影响文本的垂直布局，还可以用于实现一些常见的布局技巧（如垂直居中）。
行高的计算公式：
行高 = 字体大小 + 上下间距
取值类型
line-height可以接受以下类型的值：
| 值类型 | 示例 | 描述 |
|---|---|---|
| 数值 | 1.5 | 行高为字体大小的1.5倍 |
| 长度单位 | 20px | 行高为固定值20px |
| 百分比 | 150% | 行高为字体大小的150% |
| 关键字 | normal | 使用浏览器默认的行高（通常为1.2） |
表现形式
line-height属性对所有元素都有效，包括块元素、行内元素、行内块元素。
line-height的表现形式取决于上下文和元素类型：
- 块级元素
在块级元素中，line-height会影响其内部所有文本的行间距
第一行和第二行的行高都为字体大小的 2 倍<div style="line-height: 2; background: lightgray;">这是第一行<br>这是第二行 </div> - 行内元素
在行内元素中，line-height会影响该元素与其他行内元素的垂直对齐
行内元素span的行高为字体大小的3倍<div style="background: lightgray;">这是文本 <span style="line-height: 3;">行内元素</span> 的示例 </div> - 行内块元素
在行内块元素中，line-height会影响其内部文本的行间距，同时也会影响其自身的垂直对齐
按钮内部文本的行高为字体大小的 2 倍<div style="background: lightgray;">这是文本 <button style="line-height: 2;">按钮</button> 的示例 </div>
特殊用途
- 垂直居中
通过设置line-height等于容器高度，可以实现单行文本的垂直居中<div style="height: 100px; line-height: 100px; ">垂直居中的文本 </div> - 多行文本的行间距
通过设置line-height，可以控制多行文本的行间距<div style="line-height: 2; background: lightgray;">这是第一行<br>这是第二行 </div> - 文本与图片的垂直对齐
通过设置line-height，可以使文本与图片在同一行中垂直对齐<div style="line-height: 50px; background: lightgray;"><img src="example.png" alt="示例图片" style="vertical-align: middle;">这是文本
继承性
line-height属性具有继承性，父元素的line-height会传递给子元素
<div style="line-height: 2;">父元素文本<p>子元素文本</p>
</div>
子元素p的行高也为2
文本元素垂直居中原理
首先要了解几个概念
-
行框（Line Box）
每行文本都会被包裹在一个行框中，行框的高度由line-height决定。PS: 垂直方向的padding和border会增加行框的视觉区域，但不会改变行框的实际高度，行框的高度只由
line-height决定 -
基线（Baseline）
文本的基线是字符x底部对齐的参考线，行框中的文本会默认沿基线对齐。 -
垂直对齐
当line-height等于容器高度时，行框的高度与容器高度相同，浏览器会将行框在容器中垂直居中，文本也会随之居中。
基线、顶线、底线、中线
参考文档
从上到下四条线，分别是顶线（绿）、中线（蓝）、基线（红）、底线（紫）
黄线区域表示行间距，其实是分为上一行文字的下半行距和下一行文字的上半行距
-
基线
基线是小写字母x字母的下边缘（线）内联元素默认是按照基线对齐的，而基线就是小写字母
x的底部line-height属性设置的行高也就是定义的两行文字基线之间的距离。如果line-height设置为0px，两条基线就会重叠，文字就会重叠 -
顶线
顶线是中文汉字的顶部位置 -
底线
底线是中文汉字的底部位置 -
中线
css中有一个概念叫做x-height，也就是小写字母x的高度css中的小写字母
x不仅确定了基线的位置，还确定了中线（等分线）的位置中线是横过小写字母
x的中间交叉点的线，也是vertical-align: middle对应的位置，可以看出来vertical-align:middle并不是绝对的垂直居中于文字对齐，只是一种近似接近于居中的效果