1. 什么是行高属性
在CSS中， 行高（line-height）属性被用来控制文本行之间的垂直空白空间，它决定着每行文本所占用的高度。具体而言，行高定义了元素所包含文本的Baseline（基线）到Baseline之间的距离。但是行高不仅仅是指单行文本的高度，还涉及到文字和文字之间、文本上下方与相邻元素之间的垂直空间，因此行高的设置与段间距、内边距、外边距密切相关。
行高属性具有如下特点：
行高可以接受多个类型的值，例如固定大小、相对大小、百分比，甚至可以是无单位的数字。
当数据类型为比例时，计算行高：行高 = 字体大小 × 行高比例。
行高为百分比时，它是相对于当前字体大小计算得出的。
默认情况下，文本节点的值由浏览器解析，并使用浏览器默认的行高计算公式。
1.1 为什么要使用行高属性
当我们利用CSS来排版文本时，单纯的修改字体大小和字体颜色可能会让文本难以阅读，造成视觉疲劳。行高的设置可以优化文本的阅读体验，提高用户的阅读速度，减少用户的眼部疲劳感。
另外，在网页中，不同设备的分辨率和屏幕尺寸不尽相同，在这种情况下，行高的设置也可使文本在不同的屏幕设备上显示出更好的布局效果，适配不同的设备尺寸。
1.2 行高的优缺点
优点：
提高文本的可读性，使得文本的内容更加清晰明了。
有利于文本与其他元素之间的协调布局，使页面整体风格更加统一协调。
适应不同浏览器、不同的设备分辨率。
缺点：
设置过高的行高会导致文本间距过大，造成页面空白过多。
设置过小的行高，则会影响文本的可读性和排版美观度。
2. 设置行高属性的方法
行高属性在CSS中有很多种设置方法，下面我们依次介绍各种设置方法。
2.1 使用像素值设置行高
我们使用像素来设置行高值。这种方法常用于当元素比较小或由于其他布局限制，无法使用相对大小设置行高时，通常都使用像素值进行设置。
p {
line-height: 24px;
}
2.2 使用相对单位（em）设置行高
相对单位是一种非常实用的单位，因为它可以帮助我们根据元素自身的属性来设置行高。在设置行高的时候，使用 em 单位是一种不错的选择，因为它可以帮助我们实现自适应的设置。
p {
font-size: 16px;
line-height: 1.5em; /* 等同于24像素 */
}
2.3 使用百分比设置行高
百分比是一种相对单位，它可以根据元素自身或父级元素的大小来设置行高。
p {
font-size: 16px;
line-height: 150%; /* 24像素 */
}
2.4 使用无单位设置行高
在使用无单位设置行高的时候，行高被设置为与元素的字体大小相同。
p {
font-size: 16px;
line-height: 1.5;
}
3. 行高的实际应用案例
3.1 行高的使用案例
通过以下案例，我们将对行高的具体应用进行探讨。
如上图所示，我们通过设置行高来修改固定高度菜单的上下空白比例。
3.2 使用行高优化段落间距和美感
通常，我们在编写长段落文本时，需要通过合理的行高设置使得阅读更加舒适，并且可以间隔段落。
p {
font-size: 16px;
line-height: 1.5em;
margin-top: 40px;
}
3.3 行高设置为具体像素和百分比值，可以实现特殊的效果
如下示例中，特殊的行高设置产生了下划线穿过某些字体的效果。
strong {
font-size: 24px;
color: #333;
line-height: 50px;
text-decoration: underline;
}
4. 总结
行高作为CSS中十分重要的一种属性，它的应用不仅可以让页面看起来更加统一协调，还可以使得页面的设计更加人性化。除了上述介绍的 4 种设置方法，我们还可以根据实际需要结合其他css属性进行使用。
在实际应用中，我们需要仔细权衡行高的大小，以避免单行文本过度空白或多行文本过于拥挤的情况出现。同时，为了提高效率和代码复用性，推荐使用预先设定好的 CSS 样式表进行行高设置。