CSS 属性

line-height 属性修改组成一行文本的行内框的高度。

属性值

  • normal: 指示浏览器将元素中的行高设置为"合理"距离。

  • number: 元素中行的实际高度是该值乘以元素的字体大小。

  • length: 元素中行的高度是给定的值。

  • Percentage: 元素中行的高度按元素字体大小的百分比计算。

  • initial: 将行高的值设置为其默认值。

  • inherit: line-height 的值继承自其父值。

适用范围

所有 HTML 元素。

DOM 语法

object.style.lineHeight = "15px;"

CSS line-height 示例

以下是示例 -

<html>
   <head>
      <style>
         div.a {
                line-height: 2in;
                font-size: 10pt;
                background-color: rgb(188, 201, 238);
                margin-bottom: 2px;
               }
         div.b {
                line-height: 100px;
                font-size: 10pt;
                background-color: rgb(230, 235, 185);
                margin-bottom: 2px;
               }
         div.c {
                line-height: 5;
                font-size: 10pt;
                background-color: rgb(231, 174, 218);
                margin-bottom: 5px;
               }
         div.d {
                line-height: normal;
                font-size: 10pt;
                background-color: rgb(205, 149, 141);
                margin-bottom: 2px;
               }
      </style>
   </head>
   <body>
      <div class="a">This div element has a line-height set as 2inches.</div>   
      <div class="b">This div element has a line-height set as 100px.</div>
      <div class="c">This div element has a line-height set as number 5.</div>
      <div class="d">This div element has a line-height set as normal.</div>
   </body>
</html>