CSS line-height 属性-之路教程

语法

line-height: normal | number | length | initial | inherit;

行高属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height 属性示例</h2>
    <h3>line-height: normal (default)</h3>
    <div>这是一个具有标准行高的段落。
       <br> 大多数浏览器的标准行高大约是 110% 到 120%。
     </div>
  </body>
</html>

具有“长度”值的 line-height 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Line-height 属性示例</h2>
    <h3>line-height: 10px</h3>
    <div>这是一个具有指定行高的段落。
       <br> 这里的行高设置为 10 像素。
     </div>
  </body>
</html>

具有“百分比”值的 line-height 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Line-height 属性示例</h2>
    <h2>line-height: 200%</h2>
    <div>这是一个行高更大的段落。
       <br> 这里的行高设置为 200%。
     </div>
  </body>
</html>

具有所有值的 line-height 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.a {
        line-height: 1;
      }
      div.b {
        line-height: 50px;
      }
      div.c {
        line-height: 0.5cm;
      }
      div.d {
        line-height: 1cm;
      }
      div.e {
        line-height: 200%;
      }
      div.f {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height 属性示例</h2>
    <h3>line-height: 1</h3>
    <div class="a">这是一个具有指定行高的段落。
       <br> 这里的行高设置为1。
     </div>
     <h3>行高：50px</h3>
     <div class="b">这是一个具有指定行高的段落。
       <br> 这里的行高设置为 50 像素。
     </div>
     <h3>行高：0.5cm</h3>
     <div class="c">这是一个具有指定行高的段落。
       <br> 这里的行高设置为0.5厘米。
     </div>
     <h3>行高：1cm</h3>
     <div class="d">这是一个具有指定行高的段落。
       <br> 这里的行高设置为1厘米。
     </div>
     <h3>行高：200%</h3>
     <div class="e">这是一个行高更大的段落。
       <br> 这里的行高设置为 200%。
     </div>
     <h3>行高：正常</h3>
     <div class="f">这是一个具有标准行高的段落。
       <br> 大多数浏览器的标准行高大约是 110% 到 120%。
     </div>
  </body>
</html>

CSS line-height 属性

line-height 属性定义了 line-height。
有以下三种情况：

在块级元素上， line-height 属性指定元素中行框的最小行高。
在非替换行内元素上， line-height 属性指定用于计算行框高度的高度。
在替换的内联元素上，就像按钮或者其他输入元素一样， line-height 属性不影响。

负值是有效的。

大多数浏览器的默认行高约为 110% 到 120%。

line-height 属性设置文本行的前导。
如果 line-height 值大于某个元素的 font-size 值，则差异将是文本的前导。

line-height 属性在应用于内联元素时不起作用：例如图像、按钮等。

初始值	normal
应用于	列出项目（item）（item）。
继承	可继承
可动画的	是的。线的高度是有动画的。
版本	CSS1
DOM 语法	object.Style.LineHeight =“40px”;

CSS line-height 属性值说明

值	描述
normal	定义普通线高度。这是此属性的默认值。
length	定义PX，CM等的固定线路高度
number	定义一个乘以当前字体大小以设置线路高度的数字。
%	定义当前字体大小百分比的线高度。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

不同用途的行高属性

line-height 属性可用于创建不同的有趣样式。
例如，我们可以使用 line-height 属性为文本的每一行指定不同的颜色。
其中我们可以使用带有色标的线性渐变 ()。

或者我们可以使用此属性在重复线性渐变（）的帮助下在文本之间放置线条。

日期：2020-06-02 22:14:37 来源：oir作者：oir

←CSS line-clamp 属性

CSS :link 伪类→

语法