前端css 行高属性 line-height之前一直对于 "行高" line-height 不够熟悉，深受他的困扰，记

行高

之前一直对于 "行高" 这个 css 属性不够熟悉，深受他的困扰，记了忘，忘了查，时间一长又忘了，真是难受。今天就干脆总结一下，发成博客，将这斯的 “罪行” 广示于天下，以后要是再忘也能回来查查😂。如果你也层深受他的困扰，那我向你保证，以后不会了。

**文本基线：**文本中字母底部的水平线。

文字内容：没什么好解释的吧，就你写的文字。

CSS 的 line-height（行高）属性用于控制文本行之间的垂直距离，是排版中非常重要的属性，直接影响文本的可读性和视觉舒适度。

**官方解释：指的是两行文本基线之间的垂直距离，而非文本本身的高度。它包含三部分：文本内容高度 + 上间距 + 下间距（上下间距会平均分配在文本顶部和底部）。
任何抽象的解释不如例子来的快，直接举例：

当 line-height: 20px 且文本字号为 16px 时，文本上下会各分配 2px 的间距（总额外空间 4px）。

Oh ! 我突然想到一个很好的好高理解实例 ------ 作业本！

好家伙这下文本基线都直观起来了！行高就是作业本给你的每一排的垂直方向的空间。你写的字就是内容。只不过 css 中将写的字放在中间，上下平分多余空间。而平时我们写字一般是贴着文本几基线。

无单位数值（推荐使用）

如 line-height: 1.5，表示行高为当前元素 font-size 的 1.5 倍（会继承给子元素，子元素会基于自身字号计算）。
百分比（%)

如 line-height: 150%，计算方式与无单位数值类似（基于当前元素字号），但子元素会继承计算后的具体像素值，而非比例。
固定长度（px/em/rem)

如 line-height: 24px 或 line-height: 1.5em，直接指定固定行高。
normal（默认值)

浏览器自动计算（通常在 1.2 左右，不同字体可能不同），适用于大多数默认文本排版。

⚠️注意：我们一般常用的就是第一种，无单位数值，因为会基于自身字号计算，字体改变自动适应，并且还可以将这一性质传给子元素。

优化文字排版。

跟你的作业本一样。不同的作业本的格子高度不一样。是为了让你好写。

当然，行高需要配合字体大小设置才好看。这就是为什么同样的本本，你写出来的文章整体看起来总是没有你们班班花的好看，是吧，😁。哈哈，开玩笑，不是 ‘你’ ，是 ‘我’ 😂。

👉 推荐值：正文文本 1.5~1.6，标题 1.2~1.3。这样好看，我问的班花。
文本垂直居中

line-height 的规则是先将文字放在垂直空间的中间，然后上下平分空余空间。我们可以利用这一点设置元素高度（height）等于 line-height 。这样，单行文本会在元素内垂直居中。

千万别小瞧他，他可是常用的让单行文本垂直居中的方式。
```
.btn {
  height: 40px;
  line-height: 40px; /* 与 height 相等，文本垂直居中 */
  text-align: center; /* 水平居中 */
}
```
控制多行文本间距

对于段落、列表等多行文本，也通过行高控制行间距，使整体排版更舒适。
```
p {
  font-size: 16px;
  line-height: 1.6; /* 行高为 25.6px (16×1.6) */
}
```
影响内联元素的垂直空间

行高和内联元素的关系很紧密的。

内联元素不能设置高度，他的垂直空间就是由行高决定。

行高会间接影响内联元素（如 span、a）的「可点击区域」或「背景覆盖范围」。

块级元素：

因此，块级元素的 line-height 不会影响自身高度。（除非没有设置 height 且内容为空）。但块级元素的 line-height 会影响内部文本的布局。

内联元素：

所以，内联元素高度由内容和行高（line-height）决定。