line-height 行高

基本语法

line-height: 行高值;

常用单位

1. px - 像素

line-height: 30px;

2. 数值(推荐)

line-height: 1.5;  /* 字体大小的1.5倍 */
line-height: 2;    /* 字体大小的2倍 */

3. % - 百分比

line-height: 150%;  /* 字体大小的150% */
line-height: 200%;  /* 字体大小的200% */

4. normal - 默认值

line-height: normal;  /* 浏览器默认,通常是1.2 */

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>line-height 行高</title>
  <style>
    .line {
      border: 1px solid red;
      line-height: 50px;
    }

    div {
      border: 1px solid red;
      font-size: 20px;
    }
    .line1 {
      line-height: 30px;  /* 行高为30px */
    }
    .line2 {
      line-height: 2;     /* 行高为字体2倍 */
    }
    .line3 {
      line-height: 300%;  /* 行高为字体3倍 */
    }
  </style>
</head>
<body>
  <p class="line">文字在高度为 50px 的容器中垂直居中</p>
  <div class="line1">行高为30px</div>
  <div class="line2">行高为数值2</div>
  <div class="line3">行高为300%</div>
</body>
</html>

单位对比

单位	说明	是否继承
`px`	固定像素	✅ 继承数值
`数值`	字体大小的倍数	✅ 继承数值
`%`	字体大小的百分比	❌ 继承计算后的值

单行文本垂直居中

设置 line-height 等于元素高度:

.center-text {
  height: 50px;
  line-height: 50px;
}

实际应用

场景1: 文章正文

.article p {
  line-height: 1.6;  /* 推荐值: 1.5-1.8 */
  font-size: 16px;
}

场景2: 标题

h1 { line-height: 1.2; }
h2 { line-height: 1.3; }
h3 { line-height: 1.4; }

场景3: 单行文本垂直居中

.button {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

场景4: 多行文本

.text {
  line-height: 1.8;
  max-height: 5.4em;  /* 3行(1.8 × 3) */
  overflow: hidden;
}

行高与垂直对齐

/* 顶部对齐 */
.line-top {
  line-height: 1;
  padding-top: 10px;
}

/* 垂直居中 */
.line-center {
  height: 50px;
  line-height: 50px;
}

/* 底部对齐 */
.line-bottom {
  line-height: 1;
  padding-top: 30px;
  height: 50px;
}

注意事项

推荐单位: 使用数值(1.5, 2),不继承计算问题
单行居中: line-height = height
阅读体验: 正文推荐 1.5-1.8
继承性: 数值和 % 的继承方式不同

学习要点

推荐单位: 数值(1.5),避免继承问题
单行居中: line-height = height
阅读体验: 1.5-1.8
继承: 数值继承, % 继承计算值
应用: 文章正文、标题、按钮居中

css学习