1. 什么是行距
行距是指文本行与行之间的距离，它也是指行间距或行高。在CSS中，行距是用来控制文本行之间的距离的。正确设置行距有助于提高文本的可读性和美观度，特别是在大量文本存在的时候。
正确设置行距可以提高文本的可读性和美观度。当文本行之间距离过小或过大时，会影响文本的可读性。过小的行距会使文本变得拥挤，难以区分每一行，过大的行距则会使文本的读取速度变慢。
2. CSS设置行间距
在CSS中，有两种方式可以设置文本的行距。
2.1 line-height 属性
line-height 属性定义行距的大小，可以应用于块级元素或行内元素。该属性的值可以是数字、百分比和长度。
p {
line-height: 1.5;
}
上述代码将p元素的行距设置为1.5倍行高。
当将 line-height 值设置为百分比时，它是相对于所在元素的字体大小计算的。
p {
font-size: 16px;
line-height: 150%;
}
上述代码将p元素的行距设置为字体大小的150%。
当 line-height 值设置为长度时，它将直接使用该值。
p {
line-height: 2em;
}
上述代码将p元素的行距设置为2倍文本字号的大小。
2.2 vertical-align 和 height 属性
除了 line-height 属性，你也可以使用 vertical-align 和 height 属性来设置文本的行距。但是这些属性常用于设置行内元素的垂直对齐。
vertical-align 属性定义行内元素的垂直对齐方式，如果该元素没有被设置 height 或 line-height 属性，vertical-align 也会影响行距。增加或减少 vertical-align 的值可以更改行距的大小。
span {
vertical-align: middle;
}
上述代码将 span 元素的垂直对齐方式设置为中间。由于没有设置 line-height 或 height 属性，垂直对齐也会影响行距。
height 属性定义元素的高度。当该属性应用于块级元素上时，它将决定元素内容的高度。当该属性应用于行内元素上时，它将决定行距的大小。这个方法可以把行距设置为确定的数值，但是这种方法不如使用 line-height 方便。
span {
height: 20px;
display: inline-block;
margin: 10px;
}
上述代码将 span 元素的高度设置为20像素，行距大小由该属性决定。需要注意的是，将 span 元素设置为行内块元素可以为其设置高度。这里还为 span 元素设置了10像素的外边距。
3. 总结
正确设置行距可以提高文本的可读性和美观度。在CSS中，有两种设置行距的方式：line-height 和 vertical-align 和 height。line-height 是应用于块级元素和行内元素的属性，定义行距的大小，而 vertical-align 和 height 属性常用于设置行内元素的垂直对齐方式。使用这些属性可以帮助你创建具有更好可读性的文本。