CSS 行高

line-height 属性用于设置文本行之间的垂直间距，即行高。

语法

css 
line-height: [值];

取值

  • 数值：无单位的数值，乘以元素的 font-size 得到行高
  • 长度值：px、em、rem、pt 等
  • 百分比值：相对于元素 font-size 的百分比
  • normal：默认值，通常为 1.2 左右，取决于字体

示例

css 
/* 无单位数值 */
body {
  line-height: 1.5;
}

/* 长度值 */
.small-line-height {
  line-height: 20px;
}

/* 百分比值 */
.percent-line-height {
  line-height: 150%;
}

/* 默认值 */
.normal-line-height {
  line-height: normal;
}

实际应用

  1. 正文可读性：设置适当的行高可以提高长文本的可读性
  2. 标题样式：调整标题的行高以匹配设计需求
  3. 按钮文本：设置按钮内文本的行高以实现垂直居中
  4. 表单元素：调整表单输入框内文本的行高
  5. 多列布局：在多列文本中设置合适的行高

最佳实践

  1. 使用无单位数值：无单位数值是推荐的使用方式，因为它会继承并乘以继承的 font-size，保持一致的行高比例

  2. 可读性：对于正文文本，行高通常设置在 1.4-1.6 之间，以确保良好的可读性

  3. 响应式设计：使用无单位数值可以确保在不同字体大小下都能保持合适的行高

  4. 垂直居中：通过设置 line-height 等于容器高度，可以实现单行文本的垂直居中

  5. 避免行高过小：行高过小会导致文本行重叠，影响可读性

  6. 考虑字体特性：不同字体可能需要不同的行高设置，应根据实际使用的字体进行调整