CSS | line-height 属性

line-height 是 CSS 属性，用来设置行高（行与行之间的垂直距离），可以控制块级元素中子元素的行高和输入元素的高度等。

语法

selector {
  line-height: normal|number|length|%|initial|inherit;
}

属性值

• normal：默认行高，通常为 1.2 倍字体大小（具体取决于浏览器和字体设置）。
• number：用数字表示倍数的行高。例如，line-height: 1.5 表示行高为 1.5 倍字体大小。
• length：用长度值表示行高。例如，line-height: 20px 表示行高为 20 像素。
• %：用百分比表示行高。例如，line-height: 150% 表示行高为字体大小的 150%。
• initial：将属性设置为默认值。
• inherit：继承父元素的行高属性。

使用方法

设置块级元素的行高

p {
  line-height: 1.5;
}

垂直居中

使用 line-height 属性可以实现文本在父元素中垂直居中。

<div class="container">
  <p>这是一段文本</p>
</div>

.container {
  height: 100px;
  display: flex;
  align-items: center;
}

p {
  line-height: 1.5;
}

设置输入框高度

可以使用 line-height 属性调整输入框高度。

<input type="text" placeholder="请输入内容" />

input[type="text"] {
  font-size: 14px;
  line-height: 20px;
  height: 20px;
}

总结

• line-height 属性用来设置行高。
• 可以使用数字、长度值或百分比设置行高。
• 可以将属性设置为默认值或从父元素继承属性。
• 可以使用 line-height 属性实现文本在父元素中垂直居中或调整输入框高度。