行高

在CSS中，line-height 和 vertical-align 是两个用于控制文本和元素垂直方向上布局的属性。

line-height（行高）

line-height 属性用于设置行与行之间的距离，也就是文本行的垂直间距。它影响的是行内框（inline box）的高度，包括行内框内的文本和行内元素。line-height 可以设置为以下几种值：

1. 数字：这个数字会乘以当前字体尺寸来计算行高。例如，如果字体大小是12px，设置 line-height 为1.5，则行高为18px。
2. 像素(px)：直接设置行高为具体的像素值。
3. 百分比：相对于当前字体大小的百分比。
4. 关键字：如 normal，通常等同于1.2倍的字体大小。

可使用负值
图文混排时一般设置为1.6~1.8 这样看起来更清晰

vertical-align（垂直对齐）

vertical-align 属性用于设置行内元素（inline elements）或表格单元格（table-cell）内容的垂直对齐方式。它通常与行内元素（如 <span> 或 <img>）一起使用，以控制这些元素相对于它们所在行的基线（baseline）的位置。vertical-align 可以设置为以下几种值：

1. 基线对齐：baseline（默认值），元素的基线与行的基线对齐。
2. 顶部对齐：top，元素的顶部与行的顶部对齐。
3. 底部对齐：bottom，元素的底部与行的底部对齐。
4. 中间对齐：middle，元素的中部与行的基线上方一半的位置对齐。
5. 文本顶部对齐：text-top，元素的顶部与行内文本的顶部对齐。
6. 文本底部对齐：text-bottom，元素的底部与行内文本的底部对齐。
7. 百分比：相对于行高的百分比。
8. 像素(px)：相对于行高的具体像素值。

示例

1p {
2  line-height: 1.5; /* 行高为字体大小的1.5倍 */
3}
4
5img {
6  vertical-align: middle; /* 图片与文本的中间对齐 */
7}

在实际应用中，line-height 和 vertical-align 经常一起使用，以确保文本和行内元素在垂直方向上具有良好的对齐和间距。