一、什么是line-height？
在CSS中，line-height是一种用于控制行间距的属性。它定义了行高（行框盒子的高度），且会同时决定两行文字之间的距离。但需要注意的是，line-height并没有直接控制文本的大小，而是控制行框盒子的大小。当一个元素没有设置显式的line-height时，这个属性会默认继承父元素的值。
为了探究这个属性的细节，让我们先看看一些值得注意的小细节。
二、关于取值
首先，line-height的取值是多样的。你可以使用一些绝对单位比如px，或一些相对单位比如em或rem。同时，你也可以使用百分数来设置line-height，而这个百分数是依据于当前元素字体尺寸的。
div {
line-height: 1.5; /* 值1.5表示1.5倍的字体大小*/
line-height: 2em; /* 值2em表示行高是当前字体大小的2倍 */
line-height: 200%; /* 表示当前元素的行高是字体大小的200% */
}
需要注意的是，line-height的继承与其他CSS属性有些不同。如果你不想让一个元素继承父元素的line-height，你需要设置该元素为具体的值，比如使用px单位。
三、行内元素和块级元素
除了元素本身不同带来的行高差异之外，行内元素和块级元素的设置也会有所不同。行内元素中，如果设置了line-height，它将被设置为其父元素的line-height。而对于块级元素，line-height通常在元素的padding区域内生效（详见示例）。
p {
line-height: 1.5;
padding: 20px;
}
span {
line-height: 1.6;
}
/* 通过这个例子可以看到，在块级元素中设置行高通常跟padding属性有关 */
四、文本对齐
除此之外，line-height还能影响文本对齐方式。具体来说，让行高等于父元素的高度去控制文本的竖直居中。
.container {
height: 200px;
line-height: 200px; /* 如果父元素高度为200px，line-height设置为同样的值时，文本就会实现垂直居中 */
text-align: center;
}
五、解决子元素不居中的问题
如果你给一个元素设置了line-height，但是该元素的子元素（可以设置为块级元素或行内元素）没有居中，你可以使用vertical-align属性来解决。具体来说，让子元素的vertical-align属性与父元素的line-height值相同，子元素就能像父元素一样垂直居中。
.container {
height: 200px;
line-height: 200px;
text-align: center;
}
.container span {
display: inline-block;
vertical-align: middle; /* 让子元素的vertical-align属性与父元素的line-height值相同，子元素就能像父元素一样垂直居中 */
}
六、总结
在CSS中，line-height是个很有用的属性，用于控制行高和行间距。取值多样，可以使用各种单位和百分数，使用方法也很灵活，但需要注意它会对文本的对齐方式产生影响，同时也要注意行内元素和块级元素的具体使用方式。
好了，既然我们对line-height的使用方法都已经掌握了，那赶快去试试吧！
