CSS line-height 属性

CSS 属性 line-height 用于设置行高，即行框之间的距离。它可以以不同的单位进行设置，如像素（px）、百分比（%）或相对值（em）等。在网页设计中，合适的行高可以让文字更易于阅读，并且可以提高页面的美观度。

语法

selector {
    line-height: value;
}

值

• normal：默认值，浏览器会根据字体来决定行高
• <number>：设置一个数字，将会乘以字体大小来计算行高
• <length>：以像素（px）、厘米（cm）、毫米（mm）等作为单位设置行高
• <percentage>：以父元素的字体大小的百分比来设置行高
• inherit：继承父元素的行高

示例

// www.javascriptcn.com code example
p {
    line-height: 1.5; /* 设置行高为字体大小的1.5倍 */
}

h1 {
    line-height: 2em; /* 设置行高为2倍的字体大小 */
}

span {
    line-height: 150%; /* 设置行高为父元素字体大小的150% */
}

在实际应用中，合适的行高可以让文字更加清晰易读，同时也能够提高页面的整体美观度。通过合理设置 line-height 属性，可以让网页内容更加吸引人。