CSS | line-height 属性

line-height 属性用于设置元素中行框之间的距离。它可以影响行高度、行间距和文本行与容器之间的间距。

语法

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

• normal：默认值，浏览器会使用默认的行高计算规则。
• number：此值将乘以元素的字体尺寸，计算行高。
• length：使用指定的固定长度作为行高，可以使用 px、em、rem、pt 等单位。
• initial：将属性设置为默认值。
• inherit：继承父元素的属性值。

使用示例

固定行高

p {
    line-height: 1.5; /* 1.5倍行高 */
}

使用长度单位

h1 {
    line-height: 24px; /* 24像素行高 */
}

h2 {
    line-height: 1.5em; /* 1.5倍字体尺寸行高 */
}

使用百分比

p {
    line-height: 120%; /* 根据父元素字体尺寸计算行高 */
}

设置默认行高

p {
    line-height: normal; /* 使用浏览器默认行高计算规则 */
}

继承父元素行高

.container {
    line-height: 1.5;
}

p {
    line-height: inherit; /* 继承父元素的行高 */
}

注意事项

• line-height 是一个相对于字体尺寸的值，所以在响应式布局中，需要特别注意不同屏幕尺寸下的字体大小和行高的适配问题。
• line-height 的值也可以是一个无单位的数字，表示相对于当前字体尺寸的倍数。

了解更多有关 CSS 的属性和用法，可以参阅 CSS 参考手册。