CSS - 行高属性

CSS 的 **line-height** 属性控制元素内文本行之间的间距。它影响一行文本基线到下一行文本基线的垂直距离。

语法

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

属性值

值	描述
normal	指示浏览器将元素中行的⾼度设置为“合理”的距离。默认值。
数字	元素中行的实际高度为此值乘以元素的字体大小。
长度	元素中行的⾼度以长度单位指定（例如 px、cm、rem 等）。
百分比	元素中行的⾼度计算为元素字体大小的百分比。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 行高属性示例

以下示例解释了具有不同值的 **line-height** 属性。

使用 normal 值的行高属性

要为一段文本设置正常行高，我们可以使用 **normal** 值。此设置将行高调整为浏览器确定的默认值，以确保最佳可读性。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
         line-height: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: normal
   </h4>
   <p>
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

使用数值的行高属性

要为一段文本设置较大的 **line-height**，我们可以指定正数值。这些值将与 **font-size** 相乘以生成行高。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
      }

      #first {
         line-height: 1.5;
      }

      #second {
         line-height: 2;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: 1.5 (line height is 
      1.5 x font-size (16px))
   </h4>
   <p id="first">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 2 (line height is 
      2 x font-size (16px))
   </h4>
   <p id="second">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

使用长度值的行高属性

要为一段文本设置较大的 **line-height**，我们可以使用长度单位（例如 px、em、cm 等）。这些度量与 **font-size** 无关。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
      }

      #first {
         line-height: 18px;
      }

      #second {
         line-height: 2em;
      }

      #third {
         line-height: 1cm;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: 18px
   </h4>
   <p id="first">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 2em
   </h4>
   <p id="second">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 1cm
   </h4>
   <p id="third">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

使用百分比值的行高属性

要为一段文本设置较大的 **line-height**，我们可以使用百分比值（例如 10%）。这些值将行高设置为 **font-size** 的百分比，允许根据字体大小进行可缩放的调整。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
      }

      #first {
         line-height: 90%;
      }

      #second {
         line-height: 150%;
      }

      #third {
         line-height: 220%;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: 90% (line height is 
      90% of font-size)
   </h4>
   <p id="first">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 150% (line height is 
      150% of font-size)
   </h4>
   <p id="second">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 220% (line height is 
      220% of font-size)
   </h4>
   <p id="third">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

支持的浏览器

属性
line-height	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

打印页面