对line-height的理解及其赋值方式

一、核心概念

line-height 定义：行高 = 一行文本的高度，基线之间的垂直距离（非文字实际高度）
视觉表现：控制文字垂直居中排版，影响行间距和容器高度

---

二、作用详解

1. 文本垂直居中

.button {
  height: 40px;
  line-height: 40px; /* 行高 = 容器高度 → 文字垂直居中 */
}

2. 控制行间距

p {
  line-height: 1.6; /* 无单位值 → 行间距为字体大小的 1.6 倍 */
}

3. 影响容器高度

<div style="font-size: 16px; line-height: 24px;">
  文本内容 <!-- 容器高度为 24px × 行数 -->
</div>

---

三、赋值方式对比

赋值形式	示例	计算规则	继承特点
无单位数值	line-height: 1.5	当前元素 font-size × 数值	子元素继承数值，重新计算
固定像素	line-height: 24px	直接使用像素值	子元素继承固定像素值
em 单位	line-height: 1.5em	当前元素 font-size × em 值	子元素继承计算后的像素值
百分比	line-height: 150%	当前元素 font-size × 百分比	子元素继承计算后的像素值
全局关键字	line-height: normal	浏览器默认值（通常约 1.2）	-

---

四、关键场景示例

场景 1：多行文本间距控制

.article {
  font-size: 16px;
  line-height: 1.6;  /* 16px × 1.6 = 25.6px 行高 */
}

优势：字体大小变化时，行高自动按比例调整

场景 2：垂直居中按钮

.button {
  height: 40px;
  line-height: 40px; /* 单行文本垂直居中 */
}

注意：多行文本需改用 Flex 布局

场景 3：避免继承问题

.parent {
  font-size: 16px;
  line-height: 1.5; /* 子元素继承 1.5，而非 24px */
}
.child {
  font-size: 20px; /* 实际行高 = 20px × 1.5 = 30px */
}

---

五、高频面试问题

1. 问：line-height: 150% 和 line-height: 1.5 的区别？
   答：百分比单位会被子元素继承计算后的像素值，而无单位数值会继承比例因子

2. 问：为什么图片下方会有间隙？如何解决？
   答：行高导致的行框高度 > 图片高度。解决方案：

   .container { line-height: 0; }  
   img { vertical-align: bottom; }
   

3. 问：line-height 可以设置为负数吗？
   答：可以，但会导致文本重叠（实际开发中极少使用）

---

六、记忆口诀

“行高三作用：垂直居中、控行距、定容器高度；赋值四方式：数值/像素/em/百分比，继承规则要分清”