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

列印頁面