CSS中的line-height属性详解

知识点描述
line-height是CSS中用于控制文本行高的属性，它影响着行框盒子的高度和文本的垂直对齐方式。理解line-height对于精确控制文本布局、实现垂直居中以及处理多行文本间距至关重要。

基本概念

1. line-height定义行框盒子的最小高度，即文本行与行之间的垂直间距
2. 默认值通常是normal（约1.2，取决于字体和浏览器）
3. 可接受数值、长度值、百分比等不同类型的值

属性值类型

1. 数值（如1.5）：相对于当前元素的字体大小计算
2. 长度值（如20px、1.5em）：固定的具体值
3. 百分比（如150%）：相对于当前元素的字体大小计算
4. normal：使用浏览器默认的行高（通常1.0-1.2）

行高的计算方式

/* 示例1：数值类型 */
.element {
  font-size: 16px;
  line-height: 1.5; /* 实际行高 = 16px × 1.5 = 24px */
}

/* 示例2：长度值类型 */
.element {
  font-size: 16px;
  line-height: 24px; /* 固定行高24px */
}

/* 示例3：百分比类型 */
.element {
  font-size: 16px;
  line-height: 150%; /* 实际行高 = 16px × 150% = 24px */
}

行框盒子的构成

1. 内容区域：字体本身决定的高度
2. 行间距：行高减去内容区域后平均分配在上下方的空间
3. 行框高度 = 内容区域高度 + 上下行间距

实际应用场景

1. 单行文本垂直居中

.button {
  height: 40px;
  line-height: 40px; /* 行高等于容器高度 */
  text-align: center;
}

2. 多行文本间距控制

.paragraph {
  font-size: 16px;
  line-height: 1.6; /* 舒适的阅读行间距 */
  margin-bottom: 1em;
}

3. 继承特性的差异

.parent {
  font-size: 16px;
  line-height: 1.5; /* 子元素继承计算后的值24px */
}

.parent {
  font-size: 16px;
  line-height: 150%; /* 子元素继承计算后的值24px */
}

/* 推荐使用数值，因为继承的是比例而非固定值 */
.parent {
  font-size: 16px;
  line-height: 1.5; /* 子元素会根据自身字体大小重新计算 */
}

常见问题与解决方案

1. 图片底部间隙问题

.container img {
  vertical-align: middle; /* 或display: block */
  /* 解决因行高产生的底部间隙 */
}

2. 行高对布局的影响

.inline-element {
  line-height: 0; /* 可以消除内联元素间的默认间距 */
}

最佳实践建议

1. 正文文本通常使用1.5-1.6的行高比以获得最佳可读性
2. 标题可以使用较小的行高（1.2-1.3）来保持紧凑
3. 使用数值而非固定值，便于响应式设计和继承管理
4. 考虑不同字体的x-height差异，适当调整行高

通过深入理解line-height的工作原理，你可以更精确地控制文本的垂直排版，创建出更具可读性和美观度的网页布局。