全面了解 CSS 行高 line-height 的用法
1. line-height 的基本概念
Line-height（行高）是 CSS 属性中一个重要的属性，它用于控制行框的高度，即行与行之间的垂直间距。行高可通过数值、百分比或者像素来定义。
line-height: 1; /* 数值 */
line-height: 150%; /* 百分比 */
line-height: 1.5em; /* 像素或其他相对单位 */
2. line-height 的作用
line-height 主要有以下几个作用：
2.1 文字垂直居中对齐
通过设置行高大于文字的高度，可以实现文字的垂直居中对齐。
p {
font-size: 16px;
line-height: 40px;
}
上述代码中，行高设置为 40px，而字体大小为 16px，这样可以使得文字在行框中垂直居中。
line-height 的默认值通常为 normal，不同浏览器的解释可能会有所不同，因此在需要垂直居中对齐的情况下最好明确设置 line-height 的值。
2.2 设置多行文字的行间距
通过调整行高的值，可以实现多行文字的行间距控制。
p {
line-height: 1.5em;
}
上述代码中，行高设置为 1.5em，即行间距为字体大小的 1.5 倍。
2.3 创建块级元素的垂直间距
通过设置行高，也可以控制块级元素之间的垂直间距。
div {
line-height: 1.5em;
}
上述代码中，行高设置为 1.5em，使块级元素之间有一个行高的间距。
3. line-height 的注意事项
3.1 line-height 的继承性
line-height 是可以继承的，子元素的 line-height 值会继承父元素的 line-height 值。
div {
line-height: 1.5em;
}
p {
font-size: 16px;
}
在上面的代码中，p 元素继承了 div 元素的 line-height 值，即 p 元素的行高也为 1.5em。
3.2 line-height 的计算方式
当 line-height 既包含数值又包含单位时，计算的实际值为数值与字体大小的乘积。
p {
font-size: 16px;
line-height: 1.5em;
}
在上述代码中，行高实际计算为：1.5em * 16px = 24px。
3.3 line-height 的影响范围
line-height 对行框中所有元素起作用，它不仅影响文本内容，还会影响行框中其他元素的排列。
p {
font-size: 16px;
line-height: 40px;
}
上述代码中，行高设置为 40px，如果行框中包含图片或其他元素，它们将相对于行框垂直居中对齐。
3.4 line-height 的替代方案
如果只是想实现文本的行间距控制，也可以使用 margin 和 padding 等属性来实现。
p {
font-size: 16px;
margin-bottom: 10px;
}
上述代码中，通过设置 p 元素的下边距为 10px，即可实现行间距的效果。
4. 总结
line-height（行高）是 CSS 属性中用于控制行框高度的重要属性。它可通过数值、百分比或像素等单位进行定义。line-height 的作用包括文字垂直居中对齐、多行文字的行间距控制以及创建块级元素之间的垂直间距等。在使用 line-height 时需要注意其继承性、计算方式以及影响范围，同时也可以考虑使用其他属性如 margin 和 padding 等来达到类似的效果。